﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%
        }

        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <table width="1200" height="900" cellpadding="0" cellspacing="0">
        <tr>
            <td style="border:1px solid #CCCCCC">
                <canvas id="chartCanvas" width="400" height="400">
                    Your browser does not support canvas element.
                </canvas>
            </td>
            <td style="border:1px solid #CCCCCC">
                <canvas id="gridLogCanvas" width="400" height="400">
                    Your browser does not support canvas element.
                </canvas>
            </td>
            <td style="border:1px solid #CCCCCC">
                <canvas id="dateCanvas" width="400" height="400">
                    Your browser does not support canvas element.
                </canvas>
            </td>
        </tr>
        <tr>
            <td style="border:1px solid #CCCCCC">
                <canvas id="gridCanvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
            <td style="border:1px solid #CCCCCC">
                <canvas id="treeCanvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
            <td style="border:1px solid #CCCCCC">
                <canvas id="histogramCanvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
        </tr>
        <tr>
            <td style="border:1px solid #CCCCCC">
                <canvas id="chart2Canvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
            <td style="border:1px solid #CCCCCC">
                <canvas id="tabCanvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
            <td style="border:1px solid #CCCCCC">
                <canvas id="priceCanvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
        </tr>
        <tr>
            <td style="border:1px solid #CCCCCC">
                <canvas id="pyCanvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
            <td style="border:1px solid #CCCCCC">
                <canvas id="listCanvas" width="400" height="300">
                    Your browser does not support canvas element.
                </canvas>
            </td>
           
        </tr>
    </table>
    <canvas id="mycanvas" width="1000" height="700">
        Your browser does not support canvas element

    </canvas>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasChart = document.getElementById("chartCanvas"); //绘图区域
        let contextChart = canvasChart.getContext("2d"); //绘图上下文
        let paintChart = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasChart.style.width = canvasChart.width + 'px';
            canvasChart.style.height = canvasChart.height + 'px';
            canvasChart.height = canvasChart.height * window.devicePixelRatio;
            canvasChart.width = canvasChart.width * window.devicePixelRatio;
            contextChart.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintChart.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeChart = new FCSize(canvasChart.width / paintChart.ratio, canvasChart.height / paintChart.ratio);
        
        paintChart.defaultUIStyle = "light";
        paintChart.canvas = canvasChart;

        canvasChart.paint = paintChart;

        let showDemoTool_Chart = true; //是否显示Demo工具

        //K线视图
        let chart = new FCChart();
        addView(chart, paintChart);
        chart.backColor = "rgb(0,0,0)";
        chart.borderColor = "rgb(255,255,255)";
        chart.textColor = "rgb(255,255,255)";
        chart.location = new FCPoint(0, 0);
        if (showDemoTool_Chart) {
            chart.size = new FCSize(canvasSizeChart.cx, canvasSizeChart.cy - 120);
        } else {
            chart.size = new FCSize(canvasSizeChart.cx, canvasSizeChart.cy);
        }
        chart.visible = true;
        chart.rightVScaleWidth = 80;
        chart.leftVScaleWidth = 80;
        chart.vScaleDistance = 35;
        chart.hScalePixel = 11;
        chart.hScaleHeight = 35;
        chart.candlePaddingTop = 30;
        chart.candlePaddingBottom = 20;
        chart.volPaddingTop = 20;
        chart.volPaddingBottom = 0;
        chart.indPaddingTop = 20;
        chart.indPaddingBottom = 20;
        chart.vScaleDistance = 35;
        chart.font = "Default,12";

        if (showDemoTool_Chart) {
            //指标集合
            let indicators = new Array();
            indicators.push("MA");
            indicators.push("BOLL");
            indicators.push("MACD");
            indicators.push("KDJ");
            indicators.push("BIAS");
            indicators.push("BBI");
            indicators.push("RSI");
            indicators.push("ROC");
            indicators.push("WR");
            indicators.push("DMA");
            indicators.push("TRIX");
            indicators.push("CCI");
            let iLeft = 0;
            for (let i = 0; i < indicators.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 120);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = indicators[i];
                button.font = "Default,12";
                button.viewName = "Indicator";
                addView(button, paintChart);
                iLeft += 80;
            }

            //画线集合
            let plots = new Array();
            iLeft = 0;
            plots.push("Line");
            plots.push("Segment");
            plots.push("Ray");
            plots.push("Triangle");
            plots.push("Rect");
            plots.push("Cycle");
            plots.push("CircumCycle");
            plots.push("Ellipse");
            plots.push("AngleLine");
            plots.push("LRLine");
            plots.push("LRChannel");
            plots.push("SymmetricTriangle");
            let plotNames = new Array();
            plotNames.push("直线");
            plotNames.push("线段");
            plotNames.push("射线");
            plotNames.push("三角形");
            plotNames.push("矩形");
            plotNames.push("圆");
            plotNames.push("外接圆");
            plotNames.push("椭圆");
            plotNames.push("角度线");
            plotNames.push("线性回归");
            plotNames.push("线性回归通道");
            plotNames.push("对称三角形");
            for (let i = 0; i < plots.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 90);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = plotNames[i];
                button.tag = plots[i];
                button.font = "Default,12";
                button.viewName = "Plot";
                addView(button, paintChart);
                iLeft += 80;
            }

            let plots2 = new Array();
            iLeft = 0;
            plots2.push("LRBand");
            plots2.push("ParalleGram");
            plots2.push("SpeedResist");
            plots2.push("FiboFanline");
            plots2.push("FiboTimezone");
            plots2.push("Percent");
            plots2.push("BoxLine");
            plots2.push("TironeLevels");
            plots2.push("QuadrantLines");
            plots2.push("Parallel");
            plots2.push("GoldenRatio");
            plots2.push("ArrowSegment");
            let plotNames2 = new Array();
            plotNames2.push("线性回归带");
            plotNames2.push("平行四边形");
            plotNames2.push("速阻线");
            plotNames2.push("斐波扇面");
            plotNames2.push("斐波周期线");
            plotNames2.push("百分比线");
            plotNames2.push("箱型线");
            plotNames2.push("泰龙水平线");
            plotNames2.push("四等分线");
            plotNames2.push("平行线");
            plotNames2.push("黄金分割线");
            plotNames2.push("箭头线段");
            for (let i = 0; i < plots2.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 60);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = plotNames2[i];
                button.tag = plots2[i];
                button.font = "Default,12";
                button.viewName = "Plot";
                addView(button, paintChart);
                iLeft += 80;
            }

            iLeft = 0;
            let functions = new Array();
            functions.push("白色");
            functions.push("黑色");
            functions.push("标准坐标");
            functions.push("对数坐标");
            functions.push("清除画线");
            functions.push("切换到最近");
            functions.push("分时线");
            functions.push("1分钟线");
            functions.push("日线");
            functions.push("秒线");
            functions.push("TICK图");
            for (let i = 0; i < functions.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 30);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = functions[i];
                button.font = "Default,12";
                button.viewName = "Function";
                addView(button, paintChart);
                iLeft += 80;
            }
        }

        /*
        * 黑色风格
        */
        let toBlack_Chart2 = function () {
            chart.paint.defaultUIStyle = "light";
            chart.backColor = "rgb(0,0,0)";
            chart.borderColor = "rgb(255,255,255)";
            chart.textColor = "rgb(255,255,255)";
            chart.scaleColor = "rgb(100,100,100)";
            chart.crossTipColor = "rgb(50,50,50)";
            chart.crossLineColor = "rgb(100,100,100)";
            chart.gridColor = "rgba(100,100,100,125)";
            chart.indicatorColors = new Array();
            chart.indicatorColors.push("rgb(255,255,255)");
            chart.indicatorColors.push("rgb(255,255,0)");
            chart.indicatorColors.push("rgb(255,0,255)");
            chart.indicatorColors.push("rgb(255,0,0)");
            chart.indicatorColors.push("rgb(0,255,255)");
            chart.indicatorColors.push("rgb(0,255,0)");
            chart.indicatorColors.push("rgb(255,255,0)");
            chart.indicatorColors.push("rgb(255,255,255)");
            for (let i = 0; i < chart.plots.length; i++) {
                let plot = chart.plots[i];
                plot.lineColor = "rgb(255,255,255)";
                plot.pointColor = "rgba(255,255,255,125)";
            }
        };

        /*
        * 白色风格
        */
        let toWhite_Chart2 = function () {
            chart.paint.defaultUIStyle = "light";
            chart.backColor = "rgb(255,255,255)";
            chart.borderColor = "rgb(0,0,0)";
            chart.textColor = "rgb(0,0,0)";
            chart.scaleColor = "rgb(0,0,0)";
            chart.crossTipColor = "rgb(220,220,220)";
            chart.crossLineColor = "rgb(100,100,100)";
            chart.gridColor = "rgba(0,0,0,125)";
            chart.indicatorColors = new Array();
            chart.indicatorColors.push("rgb(100,100,100)");
            chart.indicatorColors.push("rgb(206,147,27)");
            chart.indicatorColors.push("rgb(150,0,150)");
            chart.indicatorColors.push("rgb(255,0,0)");
            chart.indicatorColors.push("rgb(0,150,150)");
            chart.indicatorColors.push("rgb(0,150,0)");
            chart.indicatorColors.push("rgb(59,174,218)");
            chart.indicatorColors.push("rgb(50,50,50)");
            for (let i = 0; i < chart.plots.length; i++) {
                let plot = chart.plots[i];
                plot.lineColor = "rgb(0,0,0)";
                plot.pointColor = "rgba(0,0,0,125)";
            }
        };

        if (chart.paint.defaultUIStyle == "dark") {
            toBlack_Chart2();
        } else if (chart.paint.defaultUIStyle == "light") {
            toWhite_Chart2();
        }

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Chart = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            if (view.viewName == "Indicator") {
                if (view.text == "BOLL" || view.text == "MA") {
                    chart.mainIndicator = view.text;
                } else {
                    chart.showIndicator = view.text;
                }
                calcChartIndicator(chart);
                invalidateView(chart);
            } else if (view.viewName == "Function") {
                if (view.text == "白色") {
                    toWhite_Chart2();
                    invalidateView(chart);
                } else if (view.text == "黑色") {
                    toBlack_Chart2();
                    invalidateView(chart);
                } else if (view.text == "标准坐标") {
                    chart.vScaleType = "standard";
                    invalidateView(chart);
                } else if (view.text == "对数坐标") {
                    chart.vScaleType = "log10";
                    invalidateView(chart);
                } else if (view.text == "1分钟线") {
                    chart.cycle = "minute";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    queryHistoryData();
                } else if (view.text == "日线") {
                    chart.cycle = "day";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    queryHistoryData();
                } else if (view.text == "分时线") {
                    chart.cycle = "trend";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    queryHistoryData();
                }
                else if (view.text == "秒线") {
                    chart.cycle = "second";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    chart.crossStopIndex = -1;
                    chart.plots = new Array();
                    chart.sPlot = null;
                    chart.selectShape = "";
                    chart.selectShapeEx = "";
                    chart.data = null;
                    chart.autoFillHScale = false;
                    chart.hScalePixel = 11;
                    invalidateView(chart);
                    queryRuntimeData();
                }
                else if (view.text == "TICK图") {
                    chart.cycle = "tick";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    chart.crossStopIndex = -1;
                    chart.plots = new Array();
                    chart.sPlot = null;
                    chart.selectShape = "";
                    chart.selectShapeEx = "";
                    chart.data = null;
                    chart.autoFillHScale = false;
                    chart.hScalePixel = 11;
                    invalidateView(chart);
                    queryRuntimeData();
                }
                else if (view.text == "清除画线") {
                    chart.plots = new Array();
                    chart.sPlot = null;
                    invalidateView(chart);
                } else if (view.text == "切换到最近") {
                    chart.lastVisibleIndex = chart.data.length;
                    checkChartLastVisibleIndex(chart);
                    resetChartVisibleRecord(chart);
                    calculateChartMaxMin(chart);
                    invalidateView(chart);
                }
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Chart = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                if (delta > 0) {
                    zoomOutChart(view);
                } else if (delta < 0) {
                    zoomInChart(view);
                }
                invalidateView(chart);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Chart = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                chart.plotPointSizeChart = 15;
                let mp = firstPoint;
                view.crossStopIndex = getChartIndex(view, mp);
                view.sPlot = selectPlot(view, mp);
                view.selectShape = "";
                view.selectShapeEx = "";
                view.touchDownPointChart = mp;
                if (!view.sPlot) {
                    selectShape(view, mp);
                }
                invalidateView(chart);
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Chart = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                touchMoveChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(chart);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Chart = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                view.firstTouchIndexCache = -1;
                view.secondTouchIndexCache = -1;
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Chart = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(chart);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Chart = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                view.firstTouchIndexCache = -1;
                view.secondTouchIndexCache = -1;
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "chart") {
                drawChart(view, paint, clipRect);
            } else {
                drawButton(view, paint, clipRect);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart.onPaintBorder = function (view, paint, clipRect) {
        };

        addMouseMoveEvent(canvasChart, onMouseMove_Chart);
        addMouseWheelEvent(canvasChart, onMouseWheel_Chart);
        addMouseUpEvent(canvasChart, onMouseUp_Chart, onClick_Chart);
        addTouchBeginEvent(canvasChart, onTouchBegin_Chart);
        addTouchMoveEvent(canvasChart, onTouchMove_Chart);
        addTouchEndEvent(canvasChart, onTouchEnd_Chart, onClick_Chart);

        /*
         * 重置大小
         */
        window.onresize = function () {
            invalidate(paintChart);
        };

        let securityDatas = [];
        let sData1 = new SecurityData();
        sData1.volume = 78469.756458;
        sData1.close = 15684.25;
        sData1.high = 15965.01;
        sData1.low = 15272.69;
        sData1.open = 15297.22;
        sData1.date = 1605052800.0;
        securityDatas.push(sData1);
        let sData2 = new SecurityData();
        sData2.volume = 102196.366592;
        sData2.close = 16291.87;
        sData2.high = 16340.71;
        sData2.low = 15440.65;
        sData2.open = 15684.26;
        sData2.date = 1605139200.0;
        securityDatas.push(sData2);
        let sData3 = new SecurityData();
        sData3.volume = 75691.891014;
        sData3.close = 16320.71;
        sData3.high = 16480.01;
        sData3.low = 15952.36;
        sData3.open = 16291.86;
        sData3.date = 1605225600.0;
        securityDatas.push(sData3);
        let sData4 = new SecurityData();
        sData4.volume = 59116.357179;
        sData4.close = 16070.46;
        sData4.high = 16327.0;
        sData4.low = 15670.01;
        sData4.open = 16320.05;
        sData4.date = 1605312000.0;
        securityDatas.push(sData4);
        let sData5 = new SecurityData();
        sData5.volume = 43596.851513;
        sData5.close = 15957.01;
        sData5.high = 16180.01;
        sData5.low = 15774.73;
        sData5.open = 16069.57;
        sData5.date = 1605398400.0;
        securityDatas.push(sData5);
        let sData6 = new SecurityData();
        sData6.volume = 81300.685924;
        sData6.close = 16713.58;
        sData6.high = 16880.01;
        sData6.low = 15864.01;
        sData6.open = 15957.01;
        sData6.date = 1605484800.0;
        securityDatas.push(sData6);
        let sData7 = new SecurityData();
        sData7.volume = 115192.02613;
        sData7.close = 17659.39;
        sData7.high = 17858.83;
        sData7.low = 16538.01;
        sData7.open = 16713.09;
        sData7.date = 1605571200.0;
        securityDatas.push(sData7);
        let sData8 = new SecurityData();
        sData8.volume = 141984.264415;
        sData8.close = 17776.13;
        sData8.high = 18476.94;
        sData8.low = 17222.01;
        sData8.open = 17659.39;
        sData8.date = 1605657600.0;
        securityDatas.push(sData8);
        let sData9 = new SecurityData();
        sData9.volume = 93009.571008;
        sData9.close = 17802.83;
        sData9.high = 18179.81;
        sData9.low = 17335.66;
        sData9.open = 17777.76;
        sData9.date = 1605744000.0;
        securityDatas.push(sData9);
        let sData10 = new SecurityData();
        sData10.volume = 88423.028489;
        sData10.close = 18655.68;
        sData10.high = 18815.23;
        sData10.low = 17740.05;
        sData10.open = 17802.82;
        sData10.date = 1605830400.0;
        securityDatas.push(sData10);
        let sData11 = new SecurityData();
        sData11.volume = 71308.137138;
        sData11.close = 18703.81;
        sData11.high = 18965.91;
        sData11.low = 18308.59;
        sData11.open = 18655.67;
        sData11.date = 1605916800.0;
        securityDatas.push(sData11);
        let sData12 = new SecurityData();
        sData12.volume = 74492.806006;
        sData12.close = 18414.61;
        sData12.high = 18750.01;
        sData12.low = 17699.8;
        sData12.open = 18703.81;
        sData12.date = 1606003200.0;
        securityDatas.push(sData12);
        let sData13 = new SecurityData();
        sData13.volume = 74179.661546;
        sData13.close = 18368.01;
        sData13.high = 18766.01;
        sData13.low = 18000.01;
        sData13.open = 18413.89;
        sData13.date = 1606089600.0;
        securityDatas.push(sData13);
        let sData14 = new SecurityData();
        sData14.volume = 70126.693681;
        sData14.close = 19160.02;
        sData14.high = 19410.0;
        sData14.low = 18207.99;
        sData14.open = 18368.02;
        sData14.date = 1606176000.0;
        securityDatas.push(sData14);
        let sData15 = new SecurityData();
        sData15.volume = 70760.56353;
        sData15.close = 18719.12;
        sData15.high = 19444.01;
        sData15.low = 18570.01;
        sData15.open = 19160.01;
        sData15.date = 1606262400.0;
        securityDatas.push(sData15);
        let sData16 = new SecurityData();
        sData16.volume = 102420.321403;
        sData16.close = 17149.48;
        sData16.high = 18915.04;
        sData16.low = 16188.01;
        sData16.open = 18718.84;
        sData16.date = 1606348800.0;
        securityDatas.push(sData16);
        let sData17 = new SecurityData();
        sData17.volume = 84036.578341;
        sData17.close = 17139.53;
        sData17.high = 17457.63;
        sData17.low = 16438.09;
        sData17.open = 17149.48;
        sData17.date = 1606435200.0;
        securityDatas.push(sData17);
        let sData18 = new SecurityData();
        sData18.volume = 60835.734083;
        sData18.close = 17719.86;
        sData18.high = 17880.5;
        sData18.low = 16865.57;
        sData18.open = 17139.54;
        sData18.date = 1606521600.0;
        securityDatas.push(sData18);
        let sData19 = new SecurityData();
        sData19.volume = 55329.026303;
        sData19.close = 18185.0;
        sData19.high = 18360.06;
        sData19.low = 17517.01;
        sData19.open = 17719.85;
        sData19.date = 1606608000.0;
        securityDatas.push(sData19);
        let sData20 = new SecurityData();
        sData20.volume = 96227.350495;
        sData20.close = 19695.88;
        sData20.high = 19777.04;
        sData20.low = 18185.0;
        sData20.open = 18185.01;
        sData20.date = 1606694400.0;
        securityDatas.push(sData20);
        let sData21 = new SecurityData();
        sData21.volume = 100331.141203;
        sData21.close = 18764.97;
        sData21.high = 19888.01;
        sData21.low = 18350.0;
        sData21.open = 19695.88;
        sData21.date = 1606780800.0;
        securityDatas.push(sData21);
        let sData22 = new SecurityData();
        sData22.volume = 75848.875728;
        sData22.close = 19204.1;
        sData22.high = 19342.01;
        sData22.low = 18330.01;
        sData22.open = 18764.97;
        sData22.date = 1606867200.0;
        securityDatas.push(sData22);
        let sData23 = new SecurityData();
        sData23.volume = 64987.682732;
        sData23.close = 19421.91;
        sData23.high = 19598.01;
        sData23.low = 18867.21;
        sData23.open = 19204.09;
        sData23.date = 1606953600.0;
        securityDatas.push(sData23);
        let sData24 = new SecurityData();
        sData24.volume = 65481.220724;
        sData24.close = 18650.53;
        sData24.high = 19527.01;
        sData24.low = 18565.32;
        sData24.open = 19422.35;
        sData24.date = 1607040000.0;
        securityDatas.push(sData24);
        let sData25 = new SecurityData();
        sData25.volume = 42922.758573;
        sData25.close = 19147.67;
        sData25.high = 19177.01;
        sData25.low = 18500.01;
        sData25.open = 18650.52;
        sData25.date = 1607126400.0;
        securityDatas.push(sData25);
        let sData26 = new SecurityData();
        sData26.volume = 37043.101861;
        sData26.close = 19359.41;
        sData26.high = 19420.01;
        sData26.low = 18857.01;
        sData26.open = 19147.67;
        sData26.date = 1607212800.0;
        securityDatas.push(sData26);
        let sData27 = new SecurityData();
        sData27.volume = 40833.661907;
        sData27.close = 19166.91;
        sData27.high = 19420.92;
        sData27.low = 18902.89;
        sData27.open = 19358.68;
        sData27.date = 1607299200.0;
        securityDatas.push(sData27);
        let sData28 = new SecurityData();
        sData28.volume = 56080.515386;
        sData28.close = 18324.12;
        sData28.high = 19294.85;
        sData28.low = 18200.01;
        sData28.open = 19166.91;
        sData28.date = 1607385600.0;
        securityDatas.push(sData28);
        let sData29 = new SecurityData();
        sData29.volume = 75498.213856;
        sData29.close = 18541.29;
        sData29.high = 18639.58;
        sData29.low = 17650.01;
        sData29.open = 18324.12;
        sData29.date = 1607472000.0;
        securityDatas.push(sData29);
        let sData30 = new SecurityData();
        sData30.volume = 52890.685094;
        sData30.close = 18254.64;
        sData30.high = 18557.33;
        sData30.low = 17911.13;
        sData30.open = 18541.3;
        sData30.date = 1607558400.0;
        securityDatas.push(sData30);
        let sData31 = new SecurityData();
        sData31.volume = 72610.734259;
        sData31.close = 18036.54;
        sData31.high = 18292.74;
        sData31.low = 17572.34;
        sData31.open = 18254.82;
        sData31.date = 1607644800.0;
        securityDatas.push(sData31);
        let sData32 = new SecurityData();
        sData32.volume = 47592.761572;
        sData32.close = 18808.7;
        sData32.high = 18948.67;
        sData32.low = 18020.71;
        sData32.open = 18036.54;
        sData32.date = 1607731200.0;
        securityDatas.push(sData32);
        let sData33 = new SecurityData();
        sData33.volume = 56560.831744;
        sData33.close = 19175.0;
        sData33.high = 19411.01;
        sData33.low = 18711.13;
        sData33.open = 18808.7;
        sData33.date = 1607817600.0;
        securityDatas.push(sData33);
        let sData34 = new SecurityData();
        sData34.volume = 47257.211294;
        sData34.close = 19273.15;
        sData34.high = 19349.01;
        sData34.low = 19000.01;
        sData34.open = 19175.0;
        sData34.date = 1607904000.0;
        securityDatas.push(sData34);
        let sData35 = new SecurityData();
        sData35.volume = 61792.483421;
        sData35.close = 19426.44;
        sData35.high = 19570.01;
        sData35.low = 19050.01;
        sData35.open = 19273.7;
        sData35.date = 1607990400.0;
        securityDatas.push(sData35);
        let sData36 = new SecurityData();
        sData36.volume = 97061.040854;
        sData36.close = 21335.53;
        sData36.high = 21560.01;
        sData36.low = 19278.61;
        sData36.open = 19426.44;
        sData36.date = 1608076800.0;
        securityDatas.push(sData36);
        let sData37 = new SecurityData();
        sData37.volume = 148769.444419;
        sData37.close = 22808.99;
        sData37.high = 23699.71;
        sData37.low = 21233.01;
        sData37.open = 21335.53;
        sData37.date = 1608163200.0;
        securityDatas.push(sData37);
        let sData38 = new SecurityData();
        sData38.volume = 79646.144315;
        sData38.close = 23107.4;
        sData38.high = 23285.19;
        sData38.low = 22350.01;
        sData38.open = 22797.16;
        sData38.date = 1608249600.0;
        securityDatas.push(sData38);
        let sData39 = new SecurityData();
        sData39.volume = 82430.712232;
        sData39.close = 23821.62;
        sData39.high = 24171.48;
        sData39.low = 22750.01;
        sData39.open = 23107.4;
        sData39.date = 1608336000.0;
        securityDatas.push(sData39);
        let sData40 = new SecurityData();
        sData40.volume = 74797.201958;
        sData40.close = 23455.53;
        sData40.high = 24295.01;
        sData40.low = 23060.01;
        sData40.open = 23821.61;
        sData40.date = 1608422400.0;
        securityDatas.push(sData40);
        let sData41 = new SecurityData();
        sData41.volume = 83424.441428;
        sData41.close = 22719.72;
        sData41.high = 24102.78;
        sData41.low = 21815.01;
        sData41.open = 23455.55;
        sData41.date = 1608508800.0;
        securityDatas.push(sData41);
        let sData42 = new SecurityData();
        sData42.volume = 87033.13616;
        sData42.close = 23810.8;
        sData42.high = 23837.11;
        sData42.low = 22353.41;
        sData42.open = 22719.89;
        sData42.date = 1608595200.0;
        securityDatas.push(sData42);
        let sData43 = new SecurityData();
        sData43.volume = 112830.021287;
        sData43.close = 23232.77;
        sData43.high = 24100.01;
        sData43.low = 22810.01;
        sData43.open = 23810.8;
        sData43.date = 1608681600.0;
        securityDatas.push(sData43);
        let sData44 = new SecurityData();
        sData44.volume = 69013.844252;
        sData44.close = 23729.21;
        sData44.high = 23794.44;
        sData44.low = 22703.43;
        sData44.open = 23232.4;
        sData44.date = 1608768000.0;
        securityDatas.push(sData44);
        let sData45 = new SecurityData();
        sData45.volume = 78024.251646;
        sData45.close = 24712.48;
        sData45.high = 24789.87;
        sData45.low = 23434.74;
        sData45.open = 23729.0;
        sData45.date = 1608854400.0;
        securityDatas.push(sData45);
        let sData46 = new SecurityData();
        sData46.volume = 97806.523386;
        sData46.close = 26493.4;
        sData46.high = 26867.04;
        sData46.low = 24500.01;
        sData46.open = 24712.48;
        sData46.date = 1608940800.0;
        securityDatas.push(sData46);
        let sData47 = new SecurityData();
        sData47.volume = 145880.8092;
        sData47.close = 26281.67;
        sData47.high = 28422.01;
        sData47.low = 25700.01;
        sData47.open = 26493.41;
        sData47.date = 1609027200.0;
        securityDatas.push(sData47);
        let sData48 = new SecurityData();
        sData48.volume = 79408.740817;
        sData48.close = 27079.42;
        sData48.high = 27500.01;
        sData48.low = 26101.01;
        sData48.open = 26281.55;
        sData48.date = 1609113600.0;
        securityDatas.push(sData48);
        let sData49 = new SecurityData();
        sData49.volume = 69255.341092;
        sData49.close = 27385.01;
        sData49.high = 27410.01;
        sData49.low = 25880.01;
        sData49.open = 27079.43;
        sData49.date = 1609200000.0;
        securityDatas.push(sData49);
        let sData50 = new SecurityData();
        sData50.volume = 95356.067826;
        sData50.close = 28875.55;
        sData50.high = 28996.01;
        sData50.low = 27320.01;
        sData50.open = 27385.01;
        sData50.date = 1609286400.0;
        securityDatas.push(sData50);
        let sData51 = new SecurityData();
        sData51.volume = 75491.419522;
        sData51.close = 28923.64;
        sData51.high = 29300.01;
        sData51.low = 27850.01;
        sData51.open = 28875.56;
        sData51.date = 1609372800.0;
        securityDatas.push(sData51);
        let sData52 = new SecurityData();
        sData52.volume = 54134.113624;
        sData52.close = 29331.7;
        sData52.high = 29600.01;
        sData52.low = 28624.58;
        sData52.open = 28923.64;
        sData52.date = 1609459200.0;
        securityDatas.push(sData52);
        let sData53 = new SecurityData();
        sData53.volume = 126100.088124;
        sData53.close = 32178.34;
        sData53.high = 33300.01;
        sData53.low = 28946.54;
        sData53.open = 29331.71;
        sData53.date = 1609545600.0;
        securityDatas.push(sData53);
        let sData54 = new SecurityData();
        sData54.volume = 110771.806254;
        sData54.close = 33000.06;
        sData54.high = 34778.12;
        sData54.low = 31963.0;
        sData54.open = 32176.46;
        sData54.date = 1609632000.0;
        securityDatas.push(sData54);
        let sData55 = new SecurityData();
        sData55.volume = 121030.155465;
        sData55.close = 31988.72;
        sData55.high = 33600.01;
        sData55.low = 28130.01;
        sData55.open = 33000.06;
        sData55.date = 1609718400.0;
        securityDatas.push(sData55);
        let sData56 = new SecurityData();
        sData56.volume = 111890.475678;
        sData56.close = 33949.54;
        sData56.high = 34360.01;
        sData56.low = 29900.01;
        sData56.open = 31989.76;
        sData56.date = 1609804800.0;
        securityDatas.push(sData56);
        let sData57 = new SecurityData();
        sData57.volume = 116093.037717;
        sData57.close = 36769.37;
        sData57.high = 36939.22;
        sData57.low = 33288.01;
        sData57.open = 33949.54;
        sData57.date = 1609891200.0;
        securityDatas.push(sData57);
        let sData58 = new SecurityData();
        sData58.volume = 121506.449096;
        sData58.close = 39432.29;
        sData58.high = 40365.01;
        sData58.low = 36300.01;
        sData58.open = 36769.37;
        sData58.date = 1609977600.0;
        securityDatas.push(sData58);
        let sData59 = new SecurityData();
        sData59.volume = 138625.042444;
        sData59.close = 40582.82;
        sData59.high = 41950.01;
        sData59.low = 36500.01;
        sData59.open = 39432.49;
        sData59.date = 1610064000.0;
        securityDatas.push(sData59);
        let sData60 = new SecurityData();
        sData60.volume = 75785.989675;
        sData60.close = 40088.23;
        sData60.high = 41380.01;
        sData60.low = 38720.01;
        sData60.open = 40586.97;
        sData60.date = 1610150400.0;
        securityDatas.push(sData60);
        let sData61 = new SecurityData();
        sData61.volume = 112638.990321;
        sData61.close = 38150.03;
        sData61.high = 41350.01;
        sData61.low = 35111.12;
        sData61.open = 40088.23;
        sData61.date = 1610236800.0;
        securityDatas.push(sData61);
        let sData62 = new SecurityData();
        sData62.volume = 231175.583454;
        sData62.close = 35404.48;
        sData62.high = 38264.75;
        sData62.low = 30420.01;
        sData62.open = 38150.03;
        sData62.date = 1610323200.0;
        securityDatas.push(sData62);
        let sData63 = new SecurityData();
        sData63.volume = 133948.161996;
        sData63.close = 34051.25;
        sData63.high = 36628.01;
        sData63.low = 32531.01;
        sData63.open = 35410.38;
        sData63.date = 1610409600.0;
        securityDatas.push(sData63);
        let sData64 = new SecurityData();
        sData64.volume = 124477.924938;
        sData64.close = 37371.39;
        sData64.high = 37850.01;
        sData64.low = 32380.01;
        sData64.open = 34049.16;
        sData64.date = 1610496000.0;
        securityDatas.push(sData64);
        let sData65 = new SecurityData();
        sData65.volume = 102950.399421;
        sData65.close = 39144.51;
        sData65.high = 40100.01;
        sData65.low = 36701.24;
        sData65.open = 37371.39;
        sData65.date = 1610582400.0;
        securityDatas.push(sData65);
        let sData66 = new SecurityData();
        sData66.volume = 111365.804668;
        sData66.close = 36742.23;
        sData66.high = 39747.77;
        sData66.low = 34538.89;
        sData66.open = 39145.22;
        sData66.date = 1610668800.0;
        securityDatas.push(sData66);
        let sData67 = new SecurityData();
        sData67.volume = 86348.441508;
        sData67.close = 35994.99;
        sData67.high = 37950.01;
        sData67.low = 35357.81;
        sData67.open = 36737.44;
        sData67.date = 1610755200.0;
        securityDatas.push(sData67);
        let sData68 = new SecurityData();
        sData68.volume = 80157.737384;
        sData68.close = 35828.62;
        sData68.high = 36852.51;
        sData68.low = 33850.01;
        sData68.open = 35994.99;
        sData68.date = 1610841600.0;
        securityDatas.push(sData68);
        let sData69 = new SecurityData();
        sData69.volume = 70693.90404;
        sData69.close = 36631.28;
        sData69.high = 37469.84;
        sData69.low = 34800.01;
        sData69.open = 35825.0;
        sData69.date = 1610928000.0;
        securityDatas.push(sData69);
        let sData70 = new SecurityData();
        sData70.volume = 79596.541309;
        sData70.close = 35891.5;
        sData70.high = 37850.01;
        sData70.low = 35844.07;
        sData70.open = 36622.47;
        sData70.date = 1611014400.0;
        securityDatas.push(sData70);
        let sData71 = new SecurityData();
        sData71.volume = 89368.432918;
        sData71.close = 35468.24;
        sData71.high = 36415.32;
        sData71.low = 33400.01;
        sData71.open = 35901.95;
        sData71.date = 1611100800.0;
        securityDatas.push(sData71);
        let sData72 = new SecurityData();
        sData72.volume = 134548.811336;
        sData72.close = 30850.14;
        sData72.high = 35600.01;
        sData72.low = 30071.01;
        sData72.open = 35468.24;
        sData72.date = 1611187200.0;
        securityDatas.push(sData72);
        let sData73 = new SecurityData();
        sData73.volume = 138345.853436;
        sData73.close = 32945.18;
        sData73.high = 33826.54;
        sData73.low = 28850.01;
        sData73.open = 30852.0;
        sData73.date = 1611273600.0;
        securityDatas.push(sData73);
        let sData74 = new SecurityData();
        sData74.volume = 64595.297675;
        sData74.close = 32078.01;
        sData74.high = 33456.01;
        sData74.low = 31390.17;
        sData74.open = 32950.01;
        sData74.date = 1611360000.0;
        securityDatas.push(sData74);
        let sData75 = new SecurityData();
        sData75.volume = 57978.047966;
        sData75.close = 32259.91;
        sData75.high = 33071.01;
        sData75.low = 30900.01;
        sData75.open = 32078.01;
        sData75.date = 1611446400.0;
        securityDatas.push(sData75);
        let sData76 = new SecurityData();
        sData76.volume = 88499.236921;
        sData76.close = 32254.21;
        sData76.high = 34875.01;
        sData76.low = 31910.01;
        sData76.open = 32259.46;
        sData76.date = 1611532800.0;
        securityDatas.push(sData76);
        let sData77 = new SecurityData();
        sData77.volume = 84866.207055;
        sData77.close = 32467.78;
        sData77.high = 32921.89;
        sData77.low = 30837.38;
        sData77.open = 32254.2;
        sData77.date = 1611619200.0;
        securityDatas.push(sData77);
        let sData78 = new SecurityData();
        sData78.volume = 95911.971711;
        sData78.close = 30366.16;
        sData78.high = 32557.3;
        sData78.low = 29241.73;
        sData78.open = 32464.02;
        sData78.date = 1611705600.0;
        securityDatas.push(sData78);
        let sData79 = new SecurityData();
        sData79.volume = 92621.155617;
        sData79.close = 33364.87;
        sData79.high = 33783.99;
        sData79.low = 29842.11;
        sData79.open = 30362.2;
        sData79.date = 1611792000.0;
        securityDatas.push(sData79);
        let sData80 = new SecurityData();
        sData80.volume = 193388.622446;
        sData80.close = 34252.21;
        sData80.high = 38531.91;
        sData80.low = 31915.41;
        sData80.open = 33368.19;
        sData80.date = 1611878400.0;
        securityDatas.push(sData80);
        let sData81 = new SecurityData();
        sData81.volume = 82674.758249;
        sData81.close = 34262.89;
        sData81.high = 34933.01;
        sData81.low = 32825.01;
        sData81.open = 34246.29;
        sData81.date = 1611964800.0;
        securityDatas.push(sData81);
        let sData82 = new SecurityData();
        sData82.volume = 66269.928016;
        sData82.close = 33092.99;
        sData82.high = 34342.7;
        sData82.low = 32171.68;
        sData82.open = 34262.9;
        sData82.date = 1612051200.0;
        securityDatas.push(sData82);
        let sData83 = new SecurityData();
        sData83.volume = 80154.567802;
        sData83.close = 33526.38;
        sData83.high = 34717.28;
        sData83.low = 32296.17;
        sData83.open = 33089.45;
        sData83.date = 1612137600.0;
        securityDatas.push(sData83);
        let sData84 = new SecurityData();
        sData84.volume = 78056.66988;
        sData84.close = 35466.25;
        sData84.high = 35984.34;
        sData84.low = 33418.01;
        sData84.open = 33517.1;
        sData84.date = 1612224000.0;
        securityDatas.push(sData84);
        let sData85 = new SecurityData();
        sData85.volume = 80784.343663;
        sData85.close = 37618.88;
        sData85.high = 37662.64;
        sData85.low = 35362.39;
        sData85.open = 35472.72;
        sData85.date = 1612310400.0;
        securityDatas.push(sData85);
        let sData86 = new SecurityData();
        sData86.volume = 89024.320756;
        sData86.close = 36936.67;
        sData86.high = 38708.28;
        sData86.low = 36161.96;
        sData86.open = 37620.27;
        sData86.date = 1612396800.0;
        securityDatas.push(sData86);
        let sData87 = new SecurityData();
        sData87.volume = 65910.531514;
        sData87.close = 38290.25;
        sData87.high = 38310.13;
        sData87.low = 36570.01;
        sData87.open = 36936.66;
        sData87.date = 1612483200.0;
        securityDatas.push(sData87);
        let sData88 = new SecurityData();
        sData88.volume = 94232.612846;
        sData88.close = 39186.95;
        sData88.high = 40955.52;
        sData88.low = 38215.95;
        sData88.open = 38289.33;
        sData88.date = 1612569600.0;
        securityDatas.push(sData88);
        let sData89 = new SecurityData();
        sData89.volume = 81820.439177;
        sData89.close = 38795.7;
        sData89.high = 39700.01;
        sData89.low = 37351.01;
        sData89.open = 39181.02;
        sData89.date = 1612656000.0;
        securityDatas.push(sData89);
        let sData90 = new SecurityData();
        sData90.volume = 121568.794672;
        sData90.close = 46374.88;
        sData90.high = 46794.46;
        sData90.low = 37988.9;
        sData90.open = 38795.7;
        sData90.date = 1612742400.0;
        securityDatas.push(sData90);
        let sData91 = new SecurityData();
        sData91.volume = 114567.009318;
        sData91.close = 46420.43;
        sData91.high = 48142.2;
        sData91.low = 44961.1;
        sData91.open = 46374.87;
        sData91.date = 1612828800.0;
        securityDatas.push(sData91);
        let sData92 = new SecurityData();
        sData92.volume = 78292.89657;
        sData92.close = 44807.59;
        sData92.high = 47310.01;
        sData92.low = 43800.01;
        sData92.open = 46420.43;
        sData92.date = 1612915200.0;
        securityDatas.push(sData92);
        let sData93 = new SecurityData();
        sData93.volume = 81033.184776;
        sData93.close = 47969.52;
        sData93.high = 48678.91;
        sData93.low = 43994.03;
        sData93.open = 44807.59;
        sData93.date = 1613001600.0;
        securityDatas.push(sData93);
        let sData94 = new SecurityData();
        sData94.volume = 81856.490636;
        sData94.close = 47287.61;
        sData94.high = 48985.81;
        sData94.low = 46400.01;
        sData94.open = 47968.67;
        sData94.date = 1613088000.0;
        securityDatas.push(sData94);
        let sData95 = new SecurityData();
        sData95.volume = 58937.84066;
        sData95.close = 47153.7;
        sData95.high = 48150.01;
        sData95.low = 46202.54;
        sData95.open = 47298.16;
        sData95.date = 1613174400.0;
        securityDatas.push(sData95);
        let sData96 = new SecurityData();
        sData96.volume = 70700.864117;
        sData96.close = 48577.8;
        sData96.high = 49707.44;
        sData96.low = 47014.18;
        sData96.open = 47156.79;
        sData96.date = 1613260800.0;
        securityDatas.push(sData96);
        let sData97 = new SecurityData();
        sData97.volume = 63227.659425;
        sData97.close = 47911.11;
        sData97.high = 49010.93;
        sData97.low = 46174.79;
        sData97.open = 48580.48;
        sData97.date = 1613347200.0;
        securityDatas.push(sData97);
        let sData98 = new SecurityData();
        sData98.volume = 78018.176005;
        sData98.close = 49133.46;
        sData98.high = 50080.22;
        sData98.low = 47003.63;
        sData98.open = 47911.11;
        sData98.date = 1613433600.0;
        securityDatas.push(sData98);
        let sData99 = new SecurityData();
        sData99.volume = 84886.224046;
        sData99.close = 52119.72;
        sData99.high = 52618.75;
        sData99.low = 48947.01;
        sData99.open = 49133.46;
        sData99.date = 1613520000.0;
        securityDatas.push(sData99);
        let sData100 = new SecurityData();
        sData100.volume = 58093.930825;
        sData100.close = 51552.61;
        sData100.high = 52530.01;
        sData100.low = 50901.91;
        sData100.open = 52117.68;
        sData100.date = 1613606400.0;
        securityDatas.push(sData100);
        chart.data = securityDatas;
        resetChartVisibleRecord(chart);
        checkChartLastVisibleIndex(chart);
        calcChartIndicator(chart);

        invalidate(paintChart);
    </script>

    <script type="text/javascript">
        let canvasGrid = document.getElementById("gridCanvas"); //绘图区域
        let contextGrid = canvasGrid.getContext("2d"); //绘图上下文
        let paintGrid = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasGrid.style.width = canvasGrid.width + 'px';
            canvasGrid.style.height = canvasGrid.height + 'px';
            canvasGrid.height = canvasGrid.height * window.devicePixelRatio;
            canvasGrid.width = canvasGrid.width * window.devicePixelRatio;
            contextGrid.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintGrid.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeGrid = new FCSize(canvasGrid.width / paintGrid.ratio, canvasGrid.height / paintGrid.ratio);
        
        paintGrid.defaultUIStyle = "light";
        paintGrid.canvas = canvasGrid;
        canvasGrid.paint = paintGrid;

        //创建表格
        let grid = new FCGrid();

        /*
        * 创建列
        * grid:表格
        */
        let createGridColumn = function (grid) {
            let gridColumn = new FCGridColumn();
            if (grid.paint.defaultUIStyle == "dark") {
                gridColumn.backColor = "rgb(0,0,0)";
                gridColumn.borderColor = "rgb(150,150,150)";
                gridColumn.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridColumn.backColor = "rgb(200,200,200)";
                gridColumn.borderColor = "rgb(100,100,100)";
                gridColumn.textColor = "rgb(0,0,0)";
            }
            return gridColumn;
        };

        /*
        * 创建列
        * grid:表格
        */
        let createGridCell = function (grid) {
            let gridCell = new FCGridCell();
            if (grid.paint.defaultUIStyle == "dark") {
                gridCell.backColor = "rgb(0,0,0)";
                gridCell.borderColor = "rgb(150,150,150)";
                gridCell.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridCell.backColor = "rgb(255,255,255)";
                gridCell.borderColor = "rgb(100,100,100)";
                gridCell.textColor = "rgb(0,0,0)";
            }
            return gridCell;
        };

        /*
        * 初始化表格
        */
        let initGrid = function () {
            addView(grid, paintGrid);
            if (grid.paint.defaultUIStyle == "dark") {
                grid.backColor = "rgb(0,0,0)";
                grid.borderColor = "rgb(255,255,255)";
                grid.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                grid.backColor = "rgb(255,255,255)";
                grid.borderColor = "rgb(0,0,0)";
                grid.textColor = "rgb(0,0,0)";
            }

            grid.location = new FCPoint(0, 0);
            grid.size = new FCSize(canvasSizeGrid.cx, canvasSizeGrid.cy);
            grid.visible = true;
            //增加列
            let column1 = createGridColumn(grid);
            column1.text = "column1";
            column1.frozen = true;
            column1.width = 100;
            grid.columns.push(column1);

            let column2 = createGridColumn(grid);
            column2.text = "column2";
            column2.width = 100;
            column2.frozen = true;
            grid.columns.push(column2);

            let column3 = createGridColumn(grid);
            column3.text = "column3";
            column3.width = 100;
            column3.frozen = true;
            grid.columns.push(column3);

            let column4 = createGridColumn(grid);
            column4.text = "column4";
            column4.width = 100;
            grid.columns.push(column4);

            let column10 = createGridColumn(grid);
            column10.text = "column5";
            grid.columns.push(column10);
            column10.width = 140;

            let column11 = createGridColumn(grid);
            column11.text = "column6";
            grid.columns.push(column11);
            column11.width = 140;

            let column5 = createGridColumn(grid);
            column5.text = "column7";
            grid.columns.push(column5);

            let column6 = createGridColumn(grid);
            column6.text = "column8";
            grid.columns.push(column6);

            let column7 = createGridColumn(grid);
            column7.text = "column9";
            grid.columns.push(column7);

            let column8 = createGridColumn(grid);
            column8.text = "column10";
            grid.columns.push(column8);

            let column9 = createGridColumn(grid);
            column9.text = "column11";
            grid.columns.push(column9);
            for (let i = 0; i < 1000; i++) {
                let gridRow = new FCGridRow();
                grid.rows.push(gridRow);
                for (let j = 0; j < grid.columns.length; j++) {
                    let cell = new FCGridCell();
                    cell.value = "Cell" + i + "-" + j;
                    gridRow.cells.push(cell);
                }
            }
        }

        initGrid();

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {

        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Grid = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "grid") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchDownGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Grid = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "grid") {
                touchWheelGrid(view, delta);
                invalidateView(view);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "grid") {
                view.allowDragScroll = true;
                touchDownGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "grid") {
                touchMoveGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "grid") {
                touchUpGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Grid = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "grid") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Grid = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "grid") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchUpGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintGrid.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "grid") {
                drawDiv(view, paint, clipRect);
                drawGrid(view, paint, clipRect);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintGrid.onPaintBorder = function (view, paint, clipRect) {
            if (view.viewType == "grid") {
                drawDivBorder(view, paint, clipRect);
                drawGridScrollBar(view, paint, clipRect);
            }
        };

        addMouseDownEvent(canvasGrid, paintGrid, onMouseDown_Grid);
        addMouseMoveEvent(canvasGrid, paintGrid, onMouseMove_Grid);
        addMouseWheelEvent(canvasGrid, paintGrid, onMouseWheel_Grid);
        addMouseUpEvent(canvasGrid, paintGrid, onMouseUp_Grid, onClick_Grid);
        addTouchBeginEvent(canvasGrid, paintGrid, onTouchBegin_Grid);
        addTouchMoveEvent(canvasGrid, paintGrid, onTouchMove_Grid);
        addTouchEndEvent(canvasGrid, paintGrid, onTouchEnd_Grid, onClick_Grid);

        /*
        * 重置大小
        */
        window.onresize = function () {
            invalidate(paintGrid);
        };

        invalidate(paintGrid);
    </script>

    <script type="text/javascript">
        let canvasDate = document.getElementById("dateCanvas"); //绘图区域
        let contextDate = canvasDate.getContext("2d"); //绘图上下文
        let paintDate = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasDate.style.width = canvasDate.width + 'px';
            canvasDate.style.height = canvasDate.height + 'px';
            canvasDate.height = canvasDate.height * window.devicePixelRatio;
            canvasDate.width = canvasDate.width * window.devicePixelRatio;
            contextDate.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintDate.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeDate = new FCSize(canvasDate.width / paintDate.ratio, canvasDate.height / paintDate.ratio);
        
        paintDate.defaultUIStyle = "light";
        paintDate.canvas = canvasDate;
        canvasDate.paint = paintDate;

        /*
        * 绘制日的按钮
        * dayButton:日期按钮
        * paint:绘图对象
        */
        paintDate.onPaintCalendarDayButton = function (dayButton, paint) {
            if (dayButton.day) {
                let calendar = dayButton.calendar;
                let bounds = dayButton.bounds;
                let text = dayButton.day.day;
                let tSize = paint.textSize(text, dayButton.font);
                if (dayButton.backColor) {
                    paint.fillRect(dayButton.backColor, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
                }
                if (dayButton.inThisMonth) {
                    paint.drawText(text, dayButton.textColor, dayButton.font, bounds.left + 5, bounds.top + 7);
                } else {
                    paint.drawText(text, dayButton.textColor2, dayButton.font, bounds.left + 5, bounds.top + 7);
                }
                if (dayButton.borderColor) {
                    paint.drawRect(dayButton.borderColor, 1, 0, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
                }
            }
        };

        /*
        * 绘制月的按钮
        * monthButton:月按钮
        * paint:绘图对象
        */
        paintDate.onPaintCalendarMonthButton = function (monthButton, paint) {
            let calendar = monthButton.calendar;
            let bounds = monthButton.bounds;
            let text = getMonthStr(monthButton.month);
            let tSize = paint.textSize(text, monthButton.font);
            if (monthButton.backColor) {
                paint.fillRect(monthButton.backColor, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
            paint.drawText(text, monthButton.textColor, monthButton.font, bounds.left + 5, bounds.top + 7);
            if (monthButton.borderColor) {
                paint.drawRect(monthButton.borderColor, 1, 0, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
        };

        /*
        * 绘制年的按钮
        * yearButton:年按钮
        * paint:绘图对象
        */
        paintDate.onPaintCalendarYearButton = function (yearButton, paint) {
            let calendar = yearButton.calendar;
            let bounds = yearButton.bounds;
            let text = yearButton.year;
            let tSize = paint.textSize(text, yearButton.font);
            if (yearButton.backColor) {
                paint.fillRect(yearButton.backColor, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
            paint.drawText(text, yearButton.textColor, yearButton.font, bounds.left + 5, bounds.top + 7);
            if (yearButton.borderColor) {
                paint.drawRect(yearButton.borderColor, 1, 0, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
        };

        //创建日历
        let calendar = new FCCalendar();
        addView(calendar, paintDate);
        calendar.borderColor = null;
        calendar.textColor = null;
        calendar.location = new FCPoint(0, 0);
        calendar.size = new FCSize(canvasSizeDate.cx, canvasSizeDate.cy);
        calendar.visible = true;
        calendar.useAnimation = true;
        initCalendar(calendar);
        calendar.selectedDay = getYear(calendar.years, 2022).months.get(10).days.get(1);
        updateCalendar(calendar);
        if (calendar.paint.defaultUIStyle == "dark") {
            calendar.backColor = "rgb(0,0,0)";
            calendar.headDiv.backColor = "rgb(0,0,0)";
            calendar.headDiv.textColor = "rgb(255,255,255)";
            let dayButtonsSize = calendar.dayDiv.dayButtons.length;
            for (let i = 0; i < dayButtonsSize; i++) {
                let dayButton = calendar.dayDiv.dayButtons[i];
                let dayButton_am = calendar.dayDiv.dayButtons[i];
                dayButton.textColor2 = "rgb(200,200,200)";
                dayButton.textColor = "rgb(255,255,255)";
                dayButton.borderColor = "rgb(100,100,100)";
                dayButton_am.textColor2 = "rgb(200,200,200)";
                dayButton_am.textColor = "rgb(255,255,255)";
                dayButton_am.borderColor = "rgb(100,100,100)";
            }
            let monthButtonsSize = calendar.monthDiv.monthButtons.length;
            for (let i = 0; i < monthButtonsSize; i++) {
                let monthButton = calendar.monthDiv.monthButtons[i];
                let monthButton_am = calendar.monthDiv.monthButtons[i];
                monthButton.textColor = "rgb(255,255,255)";
                monthButton.borderColor = "rgb(100,100,100)";
                monthButton_am.textColor = "rgb(255,255,255)";
                monthButton_am.borderColor = "rgb(100,100,100)";
            }
            let yearButtonsSize = calendar.yearDiv.yearButtons.length;
            for (let i = 0; i < yearButtonsSize; i++) {
                let yearButton = calendar.yearDiv.yearButtons[i];
                let yearButton_am = calendar.yearDiv.yearButtons[i];
                yearButton.textColor = "rgb(255,255,255)";
                yearButton.borderColor = "rgb(100,100,100)";
                yearButton.textColor = "rgb(255,255,255)";
                yearButton.borderColor = "rgb(100,100,100)";
            }
        } else if (calendar.paint.defaultUIStyle == "light") {
            calendar.backColor = "rgb(255,255,255)";
            calendar.headDiv.backColor = "rgb(255,255,255)";
            calendar.headDiv.textColor = "rgb(0,0,0)";
            let dayButtonsSize = calendar.dayDiv.dayButtons.length;
            for (let i = 0; i < dayButtonsSize; i++) {
                let dayButton = calendar.dayDiv.dayButtons[i];
                let dayButton_am = calendar.dayDiv.dayButtons[i];
                dayButton.textColor2 = "rgb(50,50,50)";
                dayButton.textColor = "rgb(0,0,0)";
                dayButton.borderColor = "rgb(150,150,150)";
                dayButton_am.textColor2 = "rgb(50,50,50)";
                dayButton_am.textColor = "rgb(0,0,0)";
                dayButton_am.borderColor = "rgb(150,150,150)";
            }
            let monthButtonsSize = calendar.monthDiv.monthButtons.length;
            for (let i = 0; i < monthButtonsSize; i++) {
                let monthButton = calendar.monthDiv.monthButtons[i];
                let monthButton_am = calendar.monthDiv.monthButtons[i];
                monthButton.textColor = "rgb(0,0,0)";
                monthButton.borderColor = "rgb(150,150,150)";
                monthButton_am.textColor = "rgb(0,0,0)";
                monthButton_am.borderColor = "rgb(150,150,150)";
            }
            let yearButtonsSize = calendar.yearDiv.yearButtons.length;
            for (let i = 0; i < yearButtonsSize; i++) {
                let yearButton = calendar.yearDiv.yearButtons[i];
                let yearButton_am = calendar.yearDiv.yearButtons[i];
                yearButton.textColor = "rgb(0,0,0)";
                yearButton.borderColor = "rgb(150,150,150)";
                yearButton_am.textColor = "rgb(0,0,0)";
                yearButton_am.borderColor = "rgb(150,150,150)";
            }
        }

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Date = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            if (view == calendar) {

            }
        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Date = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "calendar") {
                clickCalendar(view, mp);
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Date = function (view, mp, buttons, clicks, delta) {
            if (view == calendar) {

            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Date = function (view, mp, buttons, clicks, delta) {
            if (view == calendar) {

            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Date = function (view, mp, buttons, clicks, delta) {
            if (view == calendar) {

            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintDate.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "calendar") {
                drawCalendar(view, paint);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintDate.onPaintBorder = function (view, paint, clipRect) {
        };

        addMouseDownEvent(canvasDate, paintDate, onMouseDown_Date);
        addMouseMoveEvent(canvasDate, paintDate, onMouseMove_Date);
        addMouseWheelEvent(canvasDate, paintDate, onMouseWheel_Date);
        addMouseUpEvent(canvasDate, paintDate, onMouseUp_Date, onClick_Date);

        /*
        * 日历的滚动秒表
        */
        let checkCalendar = function () {
            calendarTimer(calendar);
        };

        setInterval(checkCalendar, 50);

        invalidate(paintDate);
    </script>

    <script type="text/javascript">
        let canvasGridLog = document.getElementById("gridLogCanvas"); //绘图区域
        let contextGridLog = canvasGridLog.getContext("2d"); //绘图上下文
        let paintGridLog = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasGridLog.style.width = canvasGridLog.width + 'px';
            canvasGridLog.style.height = canvasGridLog.height + 'px';
            canvasGridLog.height = canvasGridLog.height * window.devicePixelRatio;
            canvasGridLog.width = canvasGridLog.width * window.devicePixelRatio;
            contextGridLog.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintGridLog.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeGridLog = new FCSize(canvasGridLog.width / paintGridLog.ratio, canvasGridLog.height / paintGridLog.ratio);
        
        paintGridLog.defaultUIStyle = "light";
        paintGridLog.canvas = canvasGridLog;

        canvasGridLog.paint = paintGridLog;

        //创建表格
        let gridLog = new FCGrid();

        /*
       * 创建列
       * grid:表格
       */
        let createGridColumn2 = function (grid) {
            let gridColumn = new FCGridColumn();
            if (grid.paint.defaultUIStyle == "dark") {
                gridColumn.backColor = "rgb(0,0,0)";
                gridColumn.borderColor = "rgb(150,150,150)";
                gridColumn.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridColumn.backColor = "rgb(200,200,200)";
                gridColumn.borderColor = "rgb(100,100,100)";
                gridColumn.textColor = "rgb(0,0,0)";
            }
            return gridColumn;
        };

        /*
        * 创建列
        * grid:表格
        */
        let createGridCell2 = function (grid) {
            let gridCell = new FCGridCell();
            if (grid.paint.defaultUIStyle == "dark") {
                gridCell.backColor = "rgb(0,0,0)";
                gridCell.borderColor = "rgb(150,150,150)";
                gridCell.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridCell.backColor = "rgb(255,255,255)";
                gridCell.borderColor = "rgb(100,100,100)";
                gridCell.textColor = "rgb(0,0,0)";
            }
            return gridCell;
        };

        /*
        * 初始化表格
        */
        let initGridLog = function () {
            gridLog.paint = paintGridLog;
            addView(gridLog, paintGridLog);
            if (gridLog.paint.defaultUIStyle == "dark") {
                gridLog.backColor = "rgb(0,0,0)";
                gridLog.borderColor = "rgb(255,255,255)";
                gridLog.textColor = "rgb(255,255,255)";
            } else if (gridLog.paint.defaultUIStyle == "light") {
                gridLog.backColor = "rgb(255,255,255)";
                gridLog.borderColor = "rgb(0,0,0)";
                gridLog.textColor = "rgb(0,0,0)";
            }
            gridLog.location = new FCPoint(0, 0);
            gridLog.size = new FCSize(canvasSizeGridLog.cx, canvasSizeGridLog.cy);
            gridLog.visible = true;
            gridLog.viewType = "gridlog";

            //增加列
            let columnNo = createGridColumn2(gridLog);;
            columnNo.text = "column1";
            columnNo.width = 100;
            gridLog.columns.push(columnNo);

            let column1 = createGridColumn2(gridLog);;
            column1.text = "column2";
            column1.width = 100;
            gridLog.columns.push(column1);

            let column2 = createGridColumn2(gridLog);;
            column2.text = "column3";
            column2.width = 100;
            gridLog.columns.push(column2);

            let column3 = createGridColumn2(gridLog);;
            column3.text = "column4";
            column3.width = 100;
            gridLog.columns.push(column3);

            let column4 = createGridColumn2(gridLog);;
            column4.text = "column5";
            column4.width = 70;
            gridLog.columns.push(column4);

            let column5 = createGridColumn2(gridLog);;
            column5.text = "column6";
            column5.width = 70;
            gridLog.columns.push(column5);

            let column6 = createGridColumn2(gridLog);;
            column6.text = "column7";
            column6.width = 70;
            gridLog.columns.push(column6);

            let column7 = createGridColumn2(gridLog);;
            column7.text = "column8";
            gridLog.columns.push(column7);

            let column8 = createGridColumn2(gridLog);;
            column8.text = "column9";
            gridLog.columns.push(column8);
        };

        initGridLog();

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_GridLog = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {

        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_GridLog = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "gridlog") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchDownGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_GridLog = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "gridlog") {
                touchWheelGrid(view, delta);
                invalidateView(view);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_GridLog = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "gridlog") {
                view.allowDragScroll = true;
                touchDownGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_GridLog = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "gridlog") {
                touchMoveGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_GridLog = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "gridlog") {
                touchUpGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_GridLog = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "gridlog") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_GridLog = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "gridlog") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchUpGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintGridLog.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "gridlog") {
                drawDiv(view, paint, clipRect);
                drawGrid(view, paint, clipRect);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintGridLog.onPaintBorder = function (view, paint, clipRect) {
            if (view.viewType == "gridlog") {
                drawDivBorder(view, paint, clipRect);
                drawGridScrollBar(view, paint, clipRect);
            }
        };

        addMouseDownEvent(canvasGridLog, paintGridLog, onMouseDown_GridLog);
        addMouseMoveEvent(canvasGridLog, paintGridLog, onMouseMove_GridLog);
        addMouseWheelEvent(canvasGridLog, paintGridLog, onMouseWheel_GridLog);
        addMouseUpEvent(canvasGridLog, paintGridLog, onMouseUp_GridLog, onClick_GridLog);
        addTouchBeginEvent(canvasGridLog, paintGridLog, onTouchBegin_GridLog);
        addTouchMoveEvent(canvasGridLog, paintGridLog, onTouchMove_GridLog);
        addTouchEndEvent(canvasGridLog, paintGridLog, onTouchEnd_GridLog, onClick_GridLog);

        /*
        * 重置大小
        */
        window.onresize = function () {
            invalidate(paintGridLog);
        };

        /*
        * 检查绘图
        */
        let checkGridLogPaint = function () {
            let gridRow = new FCGridRow();
            gridLog.rows.push(gridRow);
            for (let j = 0; j < gridLog.columns.length; j++) {
                let cell = new FCGridCell();
                cell.value = "Cell" + gridLog.rows.length + "-" + j;
                gridRow.cells.push(cell);
            }
            invalidateView(gridLog);
        };

        setInterval(checkGridLogPaint, 300);


        invalidate(paintGridLog);
    </script>

    <script type="text/javascript">
        let canvasTree = document.getElementById("treeCanvas"); //绘图区域
        let contextTree = canvasTree.getContext("2d"); //绘图上下文
        let paintTree = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasTree.style.width = canvasTree.width + 'px';
            canvasTree.style.height = canvasTree.height + 'px';
            canvasTree.height = canvasTree.height * window.devicePixelRatio;
            canvasTree.width = canvasTree.width * window.devicePixelRatio;
            contextTree.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintTree.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeTree = new FCSize(canvasTree.width / paintTree.ratio, canvasTree.height / paintTree.ratio);
        
        paintTree.canvas = canvasTree;
        paintTree.defaultUIStyle = "light";

        canvasTree.paint = paintTree;

        //创建树
        let tree = new FCTree();

        /*
        * 创建列
        * tree:树
        */
        let createTreeColumn = function (tree) {
            let treeColumn = new FCTreeColumn();
            if (tree.paint.defaultUIStyle == "dark") {
                treeColumn.backColor = "rgb(0,0,0)";
                treeColumn.borderColor = "rgb(255,255,255)";
                treeColumn.textColor = "rgb(255,255,255)";
            } else if (tree.paint.defaultUIStyle == "light") {
                treeColumn.backColor = "rgb(200,200,200)";
                treeColumn.borderColor = "rgb(0,0,0)";
                treeColumn.textColor = "rgb(0,0,0)";
            }
            return treeColumn;
        };

        /*
        * 创建列
        * tree:树
        */
        let createTreeNode = function (tree) {
            let treeNode = new FCTreeNode();
            if (tree.paint.defaultUIStyle == "dark") {
                treeNode.backColor = "rgb(0,0,0)";
                treeNode.borderColor = "rgb(255,255,255)";
                treeNode.textColor = "rgb(255,255,255)";
            } else if (tree.paint.defaultUIStyle == "light") {
                treeNode.backColor = "rgb(255,255,255)";
                treeNode.borderColor = "rgb(0,0,0)";
                treeNode.textColor = "rgb(0,0,0)";
            }
            return treeNode;
        };

        /*
        * 初始化树
        */
        let initTree = function () {
            addView(tree, paintTree);
            if (tree.paint.defaultUIStyle == "dark") {
                tree.backColor = "rgb(0,0,0)";
                tree.borderColor = "rgb(255,255,255)";
                tree.textColor = "rgb(255,255,255)";
            } else if (tree.paint.defaultUIStyle == "light") {
                tree.backColor = "rgb(255,255,255)";
                tree.borderColor = "rgb(0,0,0)";
                tree.textColor = "rgb(0,0,0)";
            }
            tree.location = new FCPoint(0, 0);
            tree.size = new FCSize(canvasSizeTree.cx, canvasSizeTree.cy);
            tree.visible = true;
            tree.showCheckBox = true;

            let column = createTreeColumn(tree);
            column.width = 500;
            tree.columns.push(column);


            let rootNode = createTreeNode(tree);
            rootNode.value = "证监会行业类";
            appendTreeNode(tree, rootNode, null);

            let node1 = createTreeNode(tree);
            node1.value = "农、林、牧、渔业";
            appendTreeNode(tree, node1, rootNode);

            let strs1 = new Array();
            strs1.push("农业");
            strs1.push("林业");
            strs1.push("畜牧业");
            strs1.push("渔业");
            strs1.push("农、林、牧、渔服务业");
            for (let i = 0; i < strs1.length; i++) {
                let subNode1 = createTreeNode(tree);
                subNode1.value = strs1[i];
                appendTreeNode(tree, subNode1, node1);
            }

            let node2 = createTreeNode(tree);
            node2.value = "采矿业";
            appendTreeNode(tree, node2, rootNode);

            let strs2 = new Array();
            strs2.push("煤炭开采和洗选业");
            strs2.push("石油和天然气开采业");
            strs2.push("黑色金属矿采选业");
            strs2.push("有色金属矿采选业");
            strs2.push("非金属矿采选业");
            strs2.push("开采辅助活动");
            for (let i = 0; i < strs2.length; i++) {
                let subNode2 = createTreeNode(tree);
                subNode2.value = strs2[i];
                appendTreeNode(tree, subNode2, node2);
            }

            let node3 = createTreeNode(tree);
            node3.value = "制造业";
            appendTreeNode(tree, node3, rootNode);

            let strs3 = new Array();
            strs3.push("农副食品加工业");
            strs3.push("食品制造业");
            strs3.push("酒、饮料和精制茶制造业");
            strs3.push("纺织业");
            strs3.push("纺织服装、服饰业");
            strs3.push("皮革、毛皮、羽毛及其制品和制鞋业");
            strs3.push("木材加工和木、竹、藤、棕、草制品业");
            strs3.push("家具制造业");
            strs3.push("造纸和纸制品业");
            strs3.push("印刷和记录媒介复制业");
            strs3.push("文教、工美、体育和娱乐用品制造业");
            strs3.push("石油加工、炼焦和核燃料加工业");
            strs3.push("化学原料及化学制品制造业");
            strs3.push("医药制造业");
            strs3.push("化学纤维制造业");
            strs3.push("橡胶和塑料制品业");
            strs3.push("非金属矿物制品业");
            strs3.push("黑色金属冶炼和压延加工业");
            strs3.push("有色金属冶炼和压延加工业");
            strs3.push("金属制品业");
            strs3.push("通用设备制造业");
            strs3.push("专用设备制造业");
            strs3.push("汽车制造业");
            strs3.push("铁路、船舶、航空航天和其他运输设备制造业");
            strs3.push("电气机械和器材制造业");
            strs3.push("计算机、通信和其他电子设备制造业");
            strs3.push("仪器仪表制造业");
            strs3.push("其他制造业");
            strs3.push("废弃资源综合利用业");
            for (let i = 0; i < strs3.length; i++) {
                let subNode3 = createTreeNode(tree);
                subNode3.value = strs3[i];
                appendTreeNode(tree, subNode3, node3);
            }
        };

        initTree();

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Tree = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {

        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Tree = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "tree") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchDownTree(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Tree = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "tree") {
                touchWheelTree(view, delta);
                invalidateView(view);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Tree = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "tree") {
                view.allowDragScroll = true;
                touchDownTree(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Tree = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "tree") {
                touchMoveTree(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Tree = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "tree") {
                touchUpTree(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Tree = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "tree") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveTree(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Tree = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "tree") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchUpTree(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintTree.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "tree") {
                drawDiv(view, paint, clipRect);
                drawTree(view, paint, clipRect);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintTree.onPaintBorder = function (view, paint, clipRect) {
            if (view.viewType == "tree") {
                drawDivBorder(view, paint, clipRect);
                drawTreeScrollBar(view, paint, clipRect);
            }
        };

        addMouseDownEvent(canvasTree, paintTree, onMouseDown_Tree);
        addMouseMoveEvent(canvasTree, paintTree, onMouseMove_Tree);
        addMouseWheelEvent(canvasTree, paintTree, onMouseWheel_Tree);
        addMouseUpEvent(canvasTree, paintTree, onMouseUp_Tree, onClick_Tree);
        addTouchBeginEvent(canvasTree, paintTree, onTouchBegin_Tree);
        addTouchMoveEvent(canvasTree, paintTree, onTouchMove_Tree);
        addTouchEndEvent(canvasTree, paintTree, onTouchEnd_Tree, onClick_Tree);

        /*
        * 重置大小
        */
        window.onresize = function () {
            invalidate(paintTree);
        };

        invalidate(paintTree);
    </script>

    <script type="text/javascript">
        let canvasTab = document.getElementById("tabCanvas"); //绘图区域
        let contextTab = canvasTab.getContext("2d"); //绘图上下文
        let paintTab = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasTab.style.width = canvasTab.width + 'px';
            canvasTab.style.height = canvasTab.height + 'px';
            canvasTab.height = canvasTab.height * window.devicePixelRatio;
            canvasTab.width = canvasTab.width * window.devicePixelRatio;
            contextTab.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintTab.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeTab = new FCSize(canvasTab.width / paintTab.ratio, canvasTab.height / paintTab.ratio);
        
        paintTab.defaultUIStyle = "light";
        paintTab.canvas = canvasTab;

        canvasTab.paint = paintTab;

        //创建多页夹
        let tabView = new FCTabView();

        //初始化多页夹
        let initTab = function () {
            addView(tabView, paintTab);
            if (tabView.paint.defaultUIStyle == "dark") {
                tabView.backColor = "rgb(0,0,0)";
                tabView.borderColor = "rgb(100,100,100)";
                tabView.textColor = "rgb(255,255,255)";
            } else if (tabView.paint.defaultUIStyle == "light") {
                tabView.backColor = "rgb(255,255,255)";
                tabView.borderColor = "rgb(150,150,150)";
                tabView.textColor = "rgb(0,0,0)";
            }
            tabView.location = new FCPoint(0, 0);
            tabView.size = new FCSize(canvasSizeTab.cx, canvasSizeTab.cy);
            tabView.visible = true;
            tabView.borderColor = null;
            tabView.underLineColor = "rgb(255,215,0)";
            tabView.underLineSize = 5;
            tabView.layout = "bottom";
            tabView.useAnimation = true;

            for (let i = 0; i < 4; i++) {
                let tabPage = new FCTabPage();
                if (i == 0) {
                    tabPage.visible = true;
                } else {
                    tabPage.visible = false;
                }
                tabPage.size = new FCSize(100, 100);
                tabPage.location = new FCSize(0, 0);
                tabPage.borderColor = null;
                tabPage.parent = tabView;
                let tabButton = new FCView();
                tabButton.viewType = "tabbutton";
                tabButton.text = "第" + (i + 1) + "页";
                tabButton.visible = true;
                tabButton.size = new FCSize(100, 30);
                tabButton.location = new FCSize(0, 0);
                tabButton.textColor = "rgb(0,0,0)";
                if (i == 0) {
                    tabPage.backColor = "rgb(255,0,0)";
                } else if (i == 1) {
                    tabPage.backColor = "rgb(0,255,0)";
                } else if (i == 2) {
                    tabPage.backColor = "rgb(0,0,255)";
                }
                else if (i == 3) {
                    tabPage.backColor = "rgb(255,0,255)";
                }
                addTabPage(tabView, tabPage, tabButton);
                if (tabView.paint.defaultUIStyle == "dark") {
                    tabButton.backColor = "rgb(0,0,0)";
                    tabButton.borderColor = "rgb(100,100,100)";
                    tabButton.textColor = "rgb(255,255,255)";
                } else if (tabView.paint.defaultUIStyle == "light") {
                    tabButton.backColor = "rgb(255,255,255)";
                    tabButton.borderColor = "rgb(150,150,150)";
                    tabButton.textColor = "rgb(0,0,0)";
                }
            }
        }
        initTab();
        updateTabLayout(tabView);

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Tab = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            if (view.viewType == "tabbutton") {
                let tabView = view.parent;
                let oldPage = null;
                for (let i = 0; i < tabView.tabPages.length; i++) {
                    if (tabView.tabPages[i].visible) {
                        oldPage = tabView.tabPages[i];
                        break;
                    }
                }
                for (let i = 0; i < tabView.tabPages.length; i++) {
                    if (tabView.tabPages[i].headerButton == view) {
                        selectTabPage(tabView, tabView.tabPages[i]);
                        if (oldPage) {
                            startTabPageAnimation(tabView.tabPages[i], oldPage);
                        }
                        break;
                    }
                }
                invalidateView(tabView);
            }
        };


        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Tab = function (view, mp, buttons, clicks, delta) {
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Tab = function (view, mp, buttons, clicks, delta) {

        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Tab = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {

        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Tab = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Tab = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Tab = function (view, mp, buttons, clicks, delta) {
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Tab = function (view, mp, buttons, clicks, delta) {
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintTab.onPaint = function (view, paint, clipRect) {
            drawButton(view, paint, clipRect);
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintTab.onPaintBorder = function (view, paint, clipRect) {
            if (view.viewType == "tabview") {
                drawTabViewBorder(view, paint, clipRect);
            }
        };

        addMouseDownEvent(canvasTab, paintTab, onMouseDown_Tab);
        addMouseMoveEvent(canvasTab, paintTab, onMouseMove_Tab);
        addMouseWheelEvent(canvasTab, paintTab, onMouseWheel_Tab);
        addMouseUpEvent(canvasTab, paintTab, onMouseUp_Tab, onClick_Tab);
        addTouchBeginEvent(canvasTab, paintTab, onTouchBegin_Tab);
        addTouchMoveEvent(canvasTab, paintTab, onTouchMove_Tab);
        addTouchEndEvent(canvasTab, paintTab, onTouchEnd_Tab, onClick_Tab);

        /*
         * 重置大小
         */
        window.onresize = function () {
            invalidate(paintTab);
        };

        invalidate(paintTab);
    </script>

    <script type="text/javascript">
        let canvasPrice = document.getElementById("priceCanvas"); //绘图区域
        let contextPrice = canvasPrice.getContext("2d"); //绘图上下文
        let paintPrice = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasPrice.style.width = canvasPrice.width + 'px';
            canvasPrice.style.height = canvasPrice.height + 'px';
            canvasPrice.height = canvasPrice.height * window.devicePixelRatio;
            canvasPrice.width = canvasPrice.width * window.devicePixelRatio;
            contextPrice.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintPrice.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizePrice = new FCSize(canvasPrice.width / paintPrice.ratio, canvasPrice.height / paintPrice.ratio);
        
        paintPrice.canvas = canvasPrice;
        paintPrice.defaultUIStyle = "light";

        canvasPrice.paint = paintPrice;

        //创建买卖档
        let priceList = new FCGrid();
        addView(priceList, paintPrice);
        if (priceList.paint.defaultUIStyle == "dark") {
            priceList.backColor = "rgb(0,0,0)";
            priceList.borderColor = "rgb(100,100,100)";
            priceList.textColor = "rgb(255,255,255)";
        } else if (priceList.paint.defaultUIStyle == "light") {
            priceList.backColor = "rgb(255,255,255)";
            priceList.borderColor = "rgb(150,150,150)";
            priceList.textColor = "rgb(0,0,0)";
        }
        priceList.location = new FCPoint(0, 0);
        priceList.size = new FCSize(canvasSizePrice.cx, canvasSizePrice.cy);
        priceList.visible = true;
        priceList.viewType = "price";

        priceList.rowHeight = 50;
        priceList.headerHeight = 20;
        let column1Price = new FCGridColumn();
        column1Price.text = "id";
        column1Price.frozen = true;
        column1Price.width = priceList.size.cx;
        priceList.columns.push(column1Price);
        if (priceList.paint.defaultUIStyle == "dark") {
            column1Price.backColor = "rgb(0,0,0)";
            column1Price.borderColor = "rgb(100,100,100)";
            column1Price.textColor = "rgb(255,255,255)";
        } else if (priceList.paint.defaultUIStyle == "light") {
            column1Price.backColor = "rgb(255,255,255)";
            column1Price.borderColor = "rgb(150,150,150)";
            column1Price.textColor = "rgb(0,0,0)";
        }

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Price = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {

        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Price = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "price") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchDownGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Price = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "price") {
                touchWheelGrid(view, delta);
                invalidateView(view);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Price = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view && view.viewType == "price") {
                view.allowDragScroll = true;
                touchDownGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Price = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view && view.viewType == "price") {
                touchMoveGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Price = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view && view.viewType == "price") {
                touchUpGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Price = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "price") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Price = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "price") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchUpGrid(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintPrice.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "price") {
                drawDiv(view, paint, clipRect);
                drawGrid(view, paint, clipRect);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintPrice.onPaintBorder = function (view, paint, clipRect) {
            if (view.viewType == "price") {
                drawDivBorder(view, paint, clipRect);
                drawGridScrollBar(view, paint, clipRect);
            }
        };

        addMouseDownEvent(canvasPrice, paintPrice, onMouseDown_Price);
        addMouseMoveEvent(canvasPrice, paintPrice, onMouseMove_Price);
        addMouseWheelEvent(canvasPrice, paintPrice, onMouseWheel_Price);
        addMouseUpEvent(canvasPrice, paintPrice, onMouseUp_Price, onClick_Price);
        addTouchBeginEvent(canvasPrice, paintPrice, onTouchBegin_Price);
        addTouchMoveEvent(canvasPrice, paintPrice, onTouchMove_Price);
        addTouchEndEvent(canvasPrice, paintPrice, onTouchEnd_Price, onClick_Price);

        /*
        * 重置大小
        */
        window.onresize = function () {
            invalidate(paintPrice);
        };

        let upColor_Price = "rgb(219,68,83)"; //上涨颜色
        let downColor_Price = "rgb(15,193,118)"; //下跌颜色
        let upColor2_Price = "rgba(219,68,83,125)"; //上涨颜色
        let downColor2_Price = "rgba(15,193,118,125)"; //下跌颜色
        let textColor_Price = "rgb(255,255,255)"; //下跌颜色
        let maxVolume_Price = 0; //最大成交量

        /*
        * 绘制单元格
        * grid:表格
        * row:行
        * column:列
        * cell:单元格
        * paint:绘图对象
        * left:左侧坐标
        * top:上方坐标
        * right:右侧坐标
        * bottom:下方坐标
        */
        paintPrice.onPaintGridCell = function (grid, row, column, cell, paint, left, top, right, bottom) {
            let width = right - left, height = bottom - top;
            let baseUpper = "Code1";
            let font1 = "Default,16";
            let font2 = "Default,14";
            let font3 = "Default,12";
            let tSize = paint.textSize(baseUpper, font1);
            let quoteUpper = " /Code2";
            let strVolume = cell.volume.toFixed(6);
            let strPrice = cell.close.toFixed(6);
            let tSize2 = paint.textSize(strVolume, font3);
            let tSize3 = paint.textSize(strPrice, font2);
            let strPrice2 = "¥" + (cell.close * 7.24).toFixed(6);
            let diffRange = ((cell.close - cell.open) / cell.close * 100).toFixed(2) + "%";
            if (grid.paint.defaultUIStyle == "dark") {
                paint.drawText(baseUpper, "rgb(255,255,255)", font1, left + 5, top + height / 2 - tSize2.cy - tSize.cy / 2);
                paint.drawText(quoteUpper, "rgb(200,200,200)", font3, left + 5 + tSize.cx, top + height / 2 - tSize2.cy - tSize2.cy / 2);
                paint.drawText(strVolume, "rgb(200,200,200)", font3, left + 5, top + height / 2 + tSize2.cy - tSize2.cy / 2);
            } else if (grid.paint.defaultUIStyle == "light") {
                paint.drawText(baseUpper, "rgb(0,0,0)", font1, left + 5, top + height / 2 - tSize2.cy - tSize.cy / 2);
                paint.drawText(quoteUpper, "rgb(50,50,50)", font3, left + 5 + tSize.cx, top + height / 2 - tSize2.cy - tSize2.cy / 2);
                paint.drawText(strVolume, "rgb(50,50,50)", font3, left + 5, top + height / 2 + tSize2.cy - tSize2.cy / 2);
            }


            let tSize5 = paint.textSize("100000.00%", font1);
            let colRect = new FCRect(left + width * 0.7 + 5, top + height / 2 - tSize5.cy, left + width * 0.7 + 5 + tSize5.cx, top + height / 2 + tSize5.cy);
            let color = downColor_Price;
            if (cell.close >= cell.open) {
                color = upColor_Price;
            }
            paint.drawText(strPrice, color, font2, left + width * 0.4 + 5, top + height / 2 - tSize3.cy - tSize3.cy / 2);
            paint.drawText(strPrice2, color, font2, left + width * 0.4 + 5, top + height / 2 + tSize3.cy - tSize3.cy / 2);
            paint.fillRect(color, colRect.left, colRect.top, colRect.right, colRect.bottom);
            let tSize4 = paint.textSize(diffRange, font1);
            if (grid.paint.defaultUIStyle == "dark") {
                paint.drawText(diffRange, "rgb(255,255,255)", font1, left + width * 0.7 + 5 + tSize5.cx / 2 - tSize4.cx / 2, top + height / 2 - tSize4.cy / 2);
            } else if (grid.paint.defaultUIStyle == "light") {
                paint.drawText(diffRange, "rgb(0,0,0)", font1, left + width * 0.7 + 5 + tSize5.cx / 2 - tSize4.cx / 2, top + height / 2 - tSize4.cy / 2);
            }
        };

        /*
        * 绘制列
        * grid:表格
        * column:列
        * paint:绘图对象
        * left:左侧坐标
        * top:上方坐标
        * right:右侧坐标
        * bottom:下方坐标
        */
        paintPrice.onPaintGridColumn = function (grid, column, paint, left, top, right, bottom) {
            let width = right - left, height = bottom - top;
            let font2 = "Default,14";
            let tSize = paint.textSize("列1", font2);

            if (grid.paint.defaultUIStyle == "dark") {
                paint.fillRect("rgb(0,0,0)", left, top, right, bottom);
                paint.drawText("列1", "rgb(200,200,200)", font2, left + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列2", "rgb(200,200,200)", font2, left + width * 0.4 + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列3", "rgb(200,200,200)", font2, left + width * 0.7 + 5, top + height / 2 - tSize.cy / 2);
            } else if (grid.paint.defaultUIStyle == "light") {
                paint.fillRect("rgb(255,255,255)", left, top, right, bottom);
                paint.drawText("列1", "rgb(50,50,50)", font2, left + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列2", "rgb(50,50,50)", font2, left + width * 0.4 + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列3", "rgb(50,50,50)", font2, left + width * 0.7 + 5, top + height / 2 - tSize.cy / 2);
            }
        };
        for (let i = 0; i < 100; i++) {
            let row = new FCGridRow;
            priceList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.open = Math.random() * 90 + 10;
            cell.close = Math.random() * 90 + 10;
            cell.volume = Math.random() * 900 + 100;
            cell.update = 0;
            row.cells.push(cell);
        }
        invalidate(paintPrice);
    </script>

    <script type="text/javascript">
        let canvasPy = document.getElementById("pyCanvas"); //绘图区域
        let contextPy = canvasPy.getContext("2d"); //绘图上下文
        let paintPy = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasPy.style.width = canvasPy.width + 'px';
            canvasPy.style.height = canvasPy.height + 'px';
            canvasPy.height = canvasPy.height * window.devicePixelRatio;
            canvasPy.width = canvasPy.width * window.devicePixelRatio;
            contextPy.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintPy.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizePy = new FCSize(canvasPy.width / paintPy.ratio, canvasPy.height / paintPy.ratio);
        
        paintPy.defaultUIStyle = "light";
        paintPy.canvas = canvasPy;
        canvasPy.paint = paintPy;

        //面积图数据
        class PyrometerData extends FCView {
            constructor() {
                super();
                this.value = 0; //数值
                this.key = null;
                this.open = 0;
                this.close = 0;
                super.viewType = "pdata"; //类型
            }
        }

        /*
        * 面积图
        */
        class PyrometerDiv extends FCView {
            constructor() {
                super();
                this.useAnimation = false; //是否使用动画
                super.viewType = "pyrometer"; //类型
                this.INF = 0x3f3f3f; //无效数据
                this.Rwidth = 0
                this.Rheight = 0;
                this.rects = new Array(); //显示区域
            }
        };

        //创建买卖档
        let pyrometer = new PyrometerDiv();
        addView(pyrometer, paintPy);
        if (pyrometer.paint.defaultUIStyle == "dark") {
            pyrometer.backColor = "rgb(0,0,0)";
            pyrometer.borderColor = "rgb(100,100,100)";
            pyrometer.textColor = "rgb(255,255,255)";
        } else if (pyrometer.paint.defaultUIStyle == "light") {
            pyrometer.backColor = "rgb(255,255,255)";
            pyrometer.borderColor = "rgb(150,150,150)";
            pyrometer.textColor = "rgb(0,0,0)";
        }
        pyrometer.location = new FCPoint(0, 0);
        pyrometer.size = new FCSize(canvasSizePy.cx, canvasSizePy.cy);

        pyrometer.visible = true;

        let layoutrow = function (pyrometer, R, w) {
            let width = pyrometer.size.cx;
            let height = pyrometer.size.cy;
            let lx = width - pyrometer.Rwidth;
            let ly = height - pyrometer.Rheight;
            let direction = 0;  // 0: horizontal;  1: vertical

            // refresh Rwidth, Rheight
            let sum = 0;
            for (let x = 0; x < R.length; x++) {
                sum += R[x];
            }
            let ext = sum / w;
            if (Math.abs(w - pyrometer.Rwidth) <= 1e-6) {
                pyrometer.Rheight -= ext;
                direction = 0;
            }
            else {
                pyrometer.Rwidth -= ext;
                direction = 1;
            }

            // store
            for (let x = 0; x < R.length; x++) {
                let r = R[x];
                if (direction == 0) {
                    let hh = ext, ww = r / ext;
                    let newRect = new FCRect(0, 0, 0, 0);
                    newRect.left = lx;
                    newRect.top = ly;
                    newRect.right = lx + ww;
                    newRect.bottom = ly + hh;
                    pyrometer.rects.push(newRect);
                    // refresh
                    lx += ww;
                }
                else {
                    let ww = ext, hh = r / ext;
                    let newRect = new FCRect(0, 0, 0, 0);
                    newRect.left = lx;
                    newRect.top = ly;
                    newRect.right = lx + ww;
                    newRect.bottom = ly + hh;
                    pyrometer.rects.push(newRect);
                    // refresh
                    ly += hh;
                }
            }
        };

        let rWidth = function (pyrometer, R, w) {
            return Math.min(pyrometer.Rwidth, pyrometer.Rheight);
        };

        let worst = function (pyrometer, R, w) {
            if (R.length == 0) {
                return pyrometer.INF;
            }
            let rmx = 0, rmn = pyrometer.INF, s = 0;
            for (let x = 0; x < R.length; x++) {
                let r = R[x];
                s += r;
                if (r > rmx) rmx = r;
                if (r < rmn) rmn = r;
            }
            let pw = Math.pow(w, 2), sw = Math.pow(s, 2);
            let res = Math.max(pw * rmx / sw, sw / (pw * rmn));
            return Math.max(pw * rmx / sw, sw / (pw * rmn));
        };

        /*
        * 动画秒表
        */
        let onPyrometerTime = function (pyrometer) {
            let paint2 = false;
            if (pyrometer.useAnimation) {
                for (let i = 0; i < pyrometer.rects.length; i++) {
                    let subView = pyrometer.views[i];
                    let targetRect = pyrometer.rects[i];
                    let nowRect = new FCRect(subView.location.x, subView.location.y, subView.location.x + subView.size.cx, subView.location.y + subView.size.cy);
                    if (true) {
                        if (nowRect.left > targetRect.left) {
                            nowRect.left -= (nowRect.left - targetRect.left) / 4;
                            if (nowRect.left - targetRect.left < 10) {
                                nowRect.left = targetRect.left;
                            }
                            paint2 = true;
                        }
                        else if (nowRect.left < targetRect.left) {
                            nowRect.left += (targetRect.left - nowRect.left) / 4;
                            if (targetRect.left - nowRect.left < 10) {
                                nowRect.left = targetRect.left;
                            }
                            paint2 = true;
                        }
                    }

                    if (true) {
                        if (nowRect.top > targetRect.top) {
                            nowRect.top -= (nowRect.top - targetRect.top) / 4;
                            if (nowRect.top - targetRect.top < 10) {
                                nowRect.top = targetRect.top;
                            }
                            paint2 = true;
                        }
                        else if (nowRect.top < targetRect.top) {
                            nowRect.top += (targetRect.top - nowRect.top) / 4;
                            if (targetRect.top - nowRect.top < 10) {
                                nowRect.top = targetRect.top;
                            }
                            paint2 = true;
                        }
                    }

                    if (true) {
                        if (nowRect.right > targetRect.right) {
                            nowRect.right -= (nowRect.right - targetRect.right) / 4;
                            if (nowRect.right - targetRect.right < 10) {
                                nowRect.right = targetRect.right;
                            }
                            paint2 = true;
                        }
                        else if (nowRect.right < targetRect.right) {
                            nowRect.right += (targetRect.right - nowRect.right) / 4;
                            if (targetRect.right - nowRect.right < 10) {
                                nowRect.right = targetRect.right;
                            }
                            paint2 = true;
                        }
                    }
                    if (true) {
                        if (nowRect.bottom > targetRect.bottom) {
                            nowRect.bottom -= (nowRect.bottom - targetRect.bottom) / 4;
                            if (nowRect.bottom - targetRect.bottom < 10) {
                                nowRect.bottom = targetRect.bottom;
                            }
                            paint2 = true;
                        }
                        else if (nowRect.bottom < targetRect.bottom) {
                            nowRect.bottom += (targetRect.bottom - nowRect.bottom) / 4;
                            if (targetRect.bottom - nowRect.bottom < 10) {
                                nowRect.bottom = targetRect.bottom;
                            }
                            paint2 = true;
                        }
                    }
                    subView.location = new FCPoint(nowRect.left, nowRect.top);
                    subView.size = new FCSize(nowRect.right - nowRect.left, nowRect.bottom - nowRect.top);
                }
            } else {
                for (let i = 0; i < pyrometer.rects.length; i++) {
                    let subView = pyrometer.views[i];
                    let targetRect = pyrometer.rects[i];
                    subView.location = new FCPoint(targetRect.left, targetRect.top);
                    subView.size = new FCSize(targetRect.right - targetRect.left, targetRect.bottom - targetRect.top);
                }
            }
            if (paint2) {
                invalidateView(pyrometer);
            }
        };

        /*
        * 更新数据
        */
        let updatePyromoter = function (pyrometer) {
            pyrometer.rects = new Array();
            let totalAmount = 0;
            for (let i = 0; i < pyrometer.views.length; i++) {
                totalAmount += pyrometer.views[i].value;
            }
            let rates = new Array();
            for (let i = 0; i < pyrometer.views.length; i++) {
                rates.push(pyrometer.views[i].value / totalAmount);
            }
            pyrometer.Rwidth = pyrometer.size.cx;
            pyrometer.Rheight = pyrometer.size.cy;
            let areas = new Array();
            for (let i = 0; i < rates.length; i++) {
                areas.push(rates[i] * pyrometer.size.cx * pyrometer.size.cy);
            }
            let children = areas;
            let row = new Array();
            let w = Math.min(pyrometer.Rwidth, pyrometer.Rheight);
            while (true) {
                if (pyrometer.rects.length > pyrometer.views.length) {
                    break;
                }
                if (w <= 0) {
                    break;
                }
                if (children.length == 0) {
                    if (row.length > 0) {
                        layoutrow(pyrometer, row, w);  // output current row
                    }
                    break;
                }

                //
                let c = children[0];
                if (c == 0) {
                    break;
                }
                let newrow = new Array();
                for (let x = 0; x < row.length; x++) {
                    newrow.push(row[x]);
                }
                newrow.push(c);
                if (worst(pyrometer, row, w) >= worst(pyrometer, newrow, w)) {  // can be placed in this row
                    //cout << " add: " << c << endl;
                    let tmp = new Array();
                    for (let x = 1; x < children.length; x++) {
                        tmp.push(children[x]);
                    }
                    children = tmp;
                    row = newrow;
                }
                else {  // placed in a empty new row
                    //cout << " new: " << c << endl;
                    layoutrow(pyrometer, row, w);  // output current row
                    row = new Array();
                    w = rWidth(pyrometer, row, parseInt(w));
                }
            }
        };

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Py = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {

        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Py = function (view, mp, buttons, clicks, delta) {
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Py = function (view, mp, buttons, clicks, delta) {
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Py = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Py = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Py = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Py = function (view, mp, buttons, clicks, delta) {
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Py = function (view, mp, buttons, clicks, delta) {
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintPy.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "pyrometer") {
                drawDiv(view, paint, clipRect);
            } else if (view.viewType == "pdata") {
                let diffRange = ((view.close - view.open) / view.close * 100).toFixed(2) + "%";
                let backColor = null;
                if (view.parent.paint.defaultUIStyle == "dark") {
                    if (view.close >= view.open) {
                        backColor = "rgb(219,68,83)";
                    } else {
                        backColor = "rgb(15,193,118)";
                    }
                } else if (view.parent.paint.defaultUIStyle == "light") {
                    if (view.close >= view.open) {
                        backColor = "rgb(255,255,255)";
                    } else {
                        backColor = "rgb(255,255,255)";
                    }
                }
                paint.fillRect(backColor, 0, 0, view.size.cx, view.size.cy);
                let fontSize1 = parseInt(Math.min(view.size.cx, view.size.cy) / 5);
                if (fontSize1 > 1) {
                    let baseUpper = "Code1";
                    let font1 = "Default," + fontSize1;
                    let tSize = paint.textSize(baseUpper, font1);
                    while (tSize.cx > view.size.cx - 10) {
                        fontSize1 -= 1;
                        if (fontSize1 < 1) {
                            return;
                        }
                        font1 = "Default," + fontSize1;
                        tSize = paint.textSize(baseUpper, font1);
                    }
                    let quoteUpper = "Code2";
                    let font2 = "Default," + (fontSize1 / 2);
                    let tSize2 = paint.textSize(quoteUpper, font2);
                    if (view.parent.paint.defaultUIStyle == "dark") {
                        paint.drawText(baseUpper, "rgb(255,255,255)", font1, (view.size.cx - tSize.cx) / 2, view.size.cy / 2 - tSize.cy - tSize.cy / 2);
                        paint.drawText(quoteUpper, "rgb(255,255,255)", font2, (view.size.cx - tSize2.cx) / 2, view.size.cy / 2 - tSize2.cy / 2);
                    } else if (view.parent.paint.defaultUIStyle == "light") {
                        paint.drawText(baseUpper, "rgb(0,0,0)", font1, (view.size.cx - tSize.cx) / 2, view.size.cy / 2 - tSize.cy - tSize.cy / 2);
                        paint.drawText(quoteUpper, "rgb(0,0,0)", font2, (view.size.cx - tSize2.cx) / 2, view.size.cy / 2 - tSize2.cy / 2);
                    }

                    let strPrice = view.close.toFixed(6);
                    let font3 = "Default," + (fontSize1 * 2 / 3);
                    let tSize5 = paint.textSize(strPrice, font3);
                    if (view.parent.paint.defaultUIStyle == "dark") {
                        paint.drawText(strPrice, "rgb(255,255,255)", font3, (view.size.cx - tSize5.cx) / 2, view.size.cy / 2 + tSize.cy - tSize5.cy / 2);
                    } else if (view.parent.paint.defaultUIStyle == "light") {
                        paint.drawText(strPrice, "rgb(0,0,0)", font3, (view.size.cx - tSize5.cx) / 2, view.size.cy / 2 + tSize.cy - tSize5.cy / 2);
                    }
                }
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintPy.onPaintBorder = function (view, paint, clipRect) {
            if (view.viewType == "pdata") {
                paint.drawRect(view.borderColor, 1, 0, 0, 0, view.size.cx, view.size.cy);
            }
        };

        addMouseDownEvent(canvasPy, paintPy, onMouseDown_Py);
        addMouseMoveEvent(canvasPy, paintPy, onMouseMove_Py);
        addMouseWheelEvent(canvasPy, paintPy, onMouseWheel_Py);
        addMouseUpEvent(canvasPy, paintPy, onMouseUp_Py, onClick_Py);
        addTouchBeginEvent(canvasPy, paintPy, onTouchBegin_Py);
        addTouchMoveEvent(canvasPy, paintPy, onTouchMove_Py);
        addTouchEndEvent(canvasPy, paintPy, onTouchEnd_Py, onClick_Py);

        /*
        * 重置大小
        */
        window.onresize = function () {
            invalidate(paintPy);
        };

        let allowPaint_Py = false;

        /*
        * 检查绘图
        */
        let checkPyPaint = function () {
            if (allowPaint_Py) {
                updatePyromoter(pyrometer);
                onPyrometerTime(pyrometer);
                invalidateView(pyrometer);
                allowPaint_Py = false;
            }
        };

        setInterval(checkPyPaint, 50);

        for (let i = 0; i < 100; i++) {
            let pData = new PyrometerData;
            pData.key = i;
            pData.text = i;
            pData.value = Math.random() * 1000 + 100;
            pData.open = Math.random() * 90 + 10;
            pData.close = Math.random() * 90 + 10;
            pData.size = new FCSize(0, 0);
            pData.location = new FCPoint(pyrometer.size.cx, pyrometer.size.cy);
            pData.backColor = null;
            pData.borderColor = "rgb(0,0,0)";
            addViewToParent(pData, pyrometer);
        }
        pyrometer.views.sort((m, n) => {
            if (m.value > n.value) {
                return -1;
            }
            else if (m.value < n.value) {
                return 1;
            }
            else return 0;
        });

        updatePyromoter(pyrometer);
        onPyrometerTime(pyrometer);
        invalidate(paintPy);

    </script>

    <script type="text/javascript">
        let canvasList = document.getElementById("listCanvas"); //绘图区域
        let contextList = canvasList.getContext("2d"); //绘图上下文
        let paintList = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasList.style.width = canvasList.width + 'px';
            canvasList.style.height = canvasList.height + 'px';
            canvasList.height = canvasList.height * window.devicePixelRatio;
            canvasList.width = canvasList.width * window.devicePixelRatio;
            contextList.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintList.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeList = new FCSize(canvasList.width / paintList.ratio, canvasList.height / paintList.ratio);
        
        paintList.defaultUIStyle = "light";
        paintList.canvas = canvasList;
        canvasList.paint = paintList;

        //面积图数据
        class ListData extends FCView {
            constructor() {
                super();
                this.value = 0; //数值
                this.key = null;
                this.firstPrice = null;
                this.data = null;
                super.viewType = "ldata"; //类型
            }
        };

        //创建图层
        let list = new FCDiv();

        //初始化图层
        let initDiv = function () {
            addView(list, paintList);
            if (list.paint.defaultUIStyle == "dark") {
                list.backColor = "rgb(0,0,0)";
            } else if (list.paint.defaultUIStyle == "light") {
                list.backColor = "rgb(255,255,255)";
            }
            list.borderColor = null;
            list.location = new FCPoint(0, 0);
            list.size = new FCSize(canvasSizeList.cx, canvasSizeList.cy);
            list.text = "图层";
            list.visible = true;
            list.viewType = "list";

            list.useAnimation = true;
            list.itemHeight = 60;
            list.rects = new Array();
        };

        initDiv();

        /*
        * 动画秒表
        */
        let onListTime = function (list) {
            let paint2 = false;
            if (list.useAnimation) {
                for (let i = 0; i < list.rects.length; i++) {
                    let subView = list.views[i];
                    let targetRect = list.rects[i];
                    let nowRect = new FCRect(subView.location.x, subView.location.y, subView.location.x + subView.size.cx, subView.location.y + subView.size.cy);
                    let isMove = false;
                    if (true) {
                        if (nowRect.left > targetRect.left) {
                            nowRect.left -= (nowRect.left - targetRect.left) / 4;
                            if (nowRect.left - targetRect.left < 10) {
                                nowRect.left = targetRect.left;
                            }
                            paint2 = true;
                        }
                        else if (nowRect.left < targetRect.left) {
                            nowRect.left += (targetRect.left - nowRect.left) / 4;
                            if (targetRect.left - nowRect.left < 10) {
                                nowRect.left = targetRect.left;
                            }
                            paint2 = true;
                        }
                    }

                    if (true) {
                        if (nowRect.top > targetRect.top) {
                            nowRect.top -= (nowRect.top - targetRect.top) / 4;
                            if (nowRect.top - targetRect.top < 10) {
                                nowRect.top = targetRect.top;
                            }
                            isMove = true;
                            paint2 = true;
                        }
                        else if (nowRect.top < targetRect.top) {
                            nowRect.top += (targetRect.top - nowRect.top) / 4;
                            if (targetRect.top - nowRect.top < 10) {
                                nowRect.top = targetRect.top;
                            }
                            paint2 = true;
                        }
                    }

                    if (true) {
                        if (nowRect.right > targetRect.right) {
                            nowRect.right -= (nowRect.right - targetRect.right) / 4;
                            if (nowRect.right - targetRect.right < 10) {
                                nowRect.right = targetRect.right;
                            }
                            paint2 = true;
                        }
                        else if (nowRect.right < targetRect.right) {
                            nowRect.right += (targetRect.right - nowRect.right) / 4;
                            if (targetRect.right - nowRect.right < 10) {
                                nowRect.right = targetRect.right;
                            }
                            paint2 = true;
                        }
                    }
                    if (true) {
                        if (nowRect.bottom > targetRect.bottom) {
                            nowRect.bottom -= (nowRect.bottom - targetRect.bottom) / 4;
                            if (nowRect.bottom - targetRect.bottom < 10) {
                                nowRect.bottom = targetRect.bottom;
                            }
                            paint2 = true;
                        }
                        else if (nowRect.bottom < targetRect.bottom) {
                            nowRect.bottom += (targetRect.bottom - nowRect.bottom) / 4;
                            if (targetRect.bottom - nowRect.bottom < 10) {
                                nowRect.bottom = targetRect.bottom;
                            }
                            paint2 = true;
                        }
                    }
                    subView.isMove = isMove;
                    subView.location = new FCPoint(nowRect.left, nowRect.top);
                    subView.size = new FCSize(nowRect.right - nowRect.left, nowRect.bottom - nowRect.top);
                }
            } else {
                for (let i = 0; i < list.rects.length; i++) {
                    let subView = list.views[i];
                    let targetRect = list.rects[i];
                    subView.location = new FCPoint(targetRect.left, targetRect.top);
                    subView.size = new FCSize(targetRect.right - targetRect.left, targetRect.bottom - targetRect.top);
                }
            }
            if (paint2) {
                invalidateView(list);
            }
        };

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
        };


        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Div = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "list") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchDownDiv(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
            if (view.viewType == "ldata") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchDownDiv(view.parent, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Div = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "list") {
                touchWheelDiv(view, delta);
                invalidateView(view);
            }
            if (view.viewType == "ldata") {
                touchWheelDiv(view.parent, delta);
                invalidateView(view.parent);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "list") {
                view.allowDragScroll = true;
                touchDownDiv(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
            if (view.viewType == "ldata") {
                view.parent.allowDragScroll = true;
                touchDownDiv(view.parent, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "list") {
                touchMoveDiv(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
            if (view.viewType == "ldata") {
                touchMoveDiv(view.parent, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view.parent);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "list") {
                touchUpDiv(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
            if (view.viewType == "ldata") {
                touchUpDiv(view.parent, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Div = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "list") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveDiv(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
            if (view.viewType == "ldata") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveDiv(view.parent, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view.parent);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Div = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "list") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchUpDiv(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
            if (view.viewType == "ldata") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchUpDiv(view.parent, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
        * 绘制数据项
        */
        let drawListItem = function (view, paint, clipRect) {
            let scrollV = view.parent.scrollV;
            if (view.location.y + view.size.cy - scrollV >= 0 && view.location.y - scrollV < view.parent.size.cy) {
                let totalValue = view.parent.totalValue;
                let diffRange = ((view.close - view.open) / view.clode * 100).toFixed(2) + "%";
                let rtRight = (view.size.cx - 130) * view.value / totalValue;
                if (view.backColor) {
                    paint.fillRect(view.backColor, 0, 10 - scrollV + view.location.y, rtRight, view.size.cy - 10 - scrollV + view.location.y);
                }
                if (view.borderColor) {
                    paint.drawRect(view.borderColor, 1, 0, 0, 10 - scrollV + view.location.y, rtRight, view.size.cy - 10 - scrollV + view.location.y);
                }
                rtRight += 10;
                let fontSize1 = parseInt(Math.min(view.size.cx, view.size.cy) / 4);
                if (fontSize1 > 1) {
                    let baseUpper = "Code1";
                    let font1 = "Default," + fontSize1;
                    let tSize = paint.textSize(baseUpper, font1);
                    let quoteUpper = "Code2";
                    let font2 = "Default," + (fontSize1 / 2);
                    let tSize2 = paint.textSize(quoteUpper, font2);

                    if (view.paint.defaultUIStyle == "dark") {
                        paint.drawText(baseUpper, "rgb(255,255,255)", font1, rtRight, view.size.cy / 2 - tSize.cy + 2 - scrollV + view.location.y - tSize.cy / 2);
                        paint.drawText(quoteUpper, "rgb(255,255,255)", font2, rtRight, view.size.cy / 2 + 2 - scrollV + view.location.y - tSize2.cy / 2);
                    } else if (view.paint.defaultUIStyle == "light") {
                        paint.drawText(baseUpper, "rgb(0,0,0)", font1, rtRight, view.size.cy / 2 - tSize.cy + 2 - scrollV + view.location.y - tSize.cy / 2);
                        paint.drawText(quoteUpper, "rgb(0,0,0)", font2, rtRight, view.size.cy / 2 + 2 - scrollV + view.location.y - tSize2.cy / 2);
                    }

                    let strPrice = view.close.toFixed(6);
                    let font3 = "Default," + (fontSize1 * 2 / 3);
                    let tSize5 = paint.textSize(strPrice, font3);
                    if (view.paint.defaultUIStyle == "dark") {
                        paint.drawText(strPrice, "rgb(255,255,255)", font3, rtRight, view.size.cy / 2 + tSize.cy + 2 - scrollV + view.location.y - tSize5.cy / 2);
                    } else if (view.paint.defaultUIStyle == "light") {
                        paint.drawText(strPrice, "rgb(0,0,0)", font3, rtRight, view.size.cy / 2 + tSize.cy + 2 - scrollV + view.location.y - tSize5.cy / 2);
                    }
                }
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintList.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "list") {
                drawDiv(view, paint, clipRect);
                for (let i = 0; i < view.views.length; i++) {
                    if (!view.views[i].isMove) {
                        drawListItem(view.views[i], paint, clipRect);
                    }
                }
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintList.onPaintBorder = function (view, paint, clipRect) {
            if (view.viewType == "list") {
                for (let i = 0; i < view.views.length; i++) {
                    if (view.views[i].isMove) {
                        drawListItem(view.views[i], paint, clipRect);
                    }
                }
                drawDivScrollBar(view, paint, clipRect);
            }
        };

        addMouseDownEvent(canvasList, paintList, onMouseDown_Div);
        addMouseMoveEvent(canvasList, paintList, onMouseMove_Div);
        addMouseWheelEvent(canvasList, paintList, onMouseWheel_Div);
        addMouseUpEvent(canvasList, paintList, onMouseUp_Div, onClick_Div);
        addTouchBeginEvent(canvasList, paintList, onTouchBegin_Div);
        addTouchMoveEvent(canvasList, paintList, onTouchMove_Div);
        addTouchEndEvent(canvasList, paintList, onTouchEnd_Div, onClick_Div);

        /*
         * 重置大小
         */
        window.onresize = function () {
            invalidate(paintList);
        };

        /*
        * 更新列表
        */
        let updateList = function (list) {
            list.rects = new Array();
            let viewsSize = list.views.length;
            for (let i = 0; i < viewsSize; i++) {
                let thisCell = list.views[i];
                list.rects.push(new FCRect(0, i * list.itemHeight, list.size.cx, (i + 1) * list.itemHeight));
            }
        };

        /*
        * 检查绘图
        */
        let checkListPaint = function () {
            updateList(list);
            onListTime(list);
            invalidateView(list);
        };

        setInterval(checkListPaint, 50);

        let listColors = new Array();
        listColors.push("rgb(59,174,218)");
        listColors.push("rgb(185,63,150)");
        listColors.push("rgb(219,68,83)");
        listColors.push("rgb(246,187,67)");
        listColors.push("rgb(216,112,173)");
        listColors.push("rgb(140,192,81)");
        listColors.push("rgb(233,87,62)");
        listColors.push("rgb(150,123,220)");
        listColors.push("rgb(75,137,220)");
        listColors.push("rgb(170,178,189)");

        for (let i = 0; i < 100; i++) {
            let pData = new ListData;
            pData.key = i;
            pData.text = i;
            pData.value = Math.random() * 900 + 100;
            pData.open = Math.random() * 90 + 10;
            pData.close = Math.random() * 90 + 10;
            pData.size = new FCSize(list.size.cx, list.itemHeight);
            pData.location = new FCPoint(0, list.views.length * list.itemHeight);
            pData.backColor = listColors[list.views.length % listColors.length];
            pData.paint = paintList;
            if (list.paint.defaultUIStyle == "dark") {
                pData.borderColor = "rgb(255,255,255)";
            } else if (list.paint.defaultUIStyle == "light") {
                pData.borderColor = "rgb(0,0,0)";
            }
            pData.visible = true;
            pData.parent = list;
            list.views.push(pData);
        }
        let totalValue = 0;
        viewsSize = list.views.length;
        for (let i = 0; i < viewsSize; i++) {
            let thisCell = list.views[i];
            if (totalValue < thisCell.value) {
                totalValue = thisCell.value;
            }
        }
        list.totalValue = totalValue;
        list.views.sort((m, n) => {
            if (m.value > n.value) {
                return -1;
            }
            else if (m.value < n.value) {
                return 1;
            }
            else return 0;
        });
        invalidate(paintList);
    </script>

    <script type="text/javascript">
        let canvasHistogram = document.getElementById("histogramCanvas"); //绘图区域
        let contextHistogram = canvasHistogram.getContext("2d"); //绘图上下文
        let paintHistogram = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasHistogram.style.width = canvasHistogram.width + 'px';
            canvasHistogram.style.height = canvasHistogram.height + 'px';
            canvasHistogram.height = canvasHistogram.height * window.devicePixelRatio;
            canvasHistogram.width = canvasHistogram.width * window.devicePixelRatio;
            contextHistogram.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintHistogram.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeHistogram = new FCSize(canvasHistogram.width / paintHistogram.ratio, canvasHistogram.height / paintHistogram.ratio);
        
        paintHistogram.defaultUIStyle = "light";
        paintHistogram.canvas = canvasHistogram;

        canvasHistogram.paint = paintHistogram;

        //K线视图
        let histogram = new FCChart();
        addView(histogram, paintHistogram);
        if (histogram.paint.defaultUIStyle == "dark") {
            histogram.backColor = "rgb(0,0,0)";
            histogram.borderColor = "rgb(100,100,100)";
            histogram.textColor = "rgb(255,255,255)";
        } else if (histogram.paint.defaultUIStyle == "light") {
            histogram.backColor = "rgb(255,255,255)";
            histogram.borderColor = "rgb(150,150,150)";
            histogram.textColor = "rgb(0,0,0)";
        }
        histogram.location = new FCPoint(0, 0);
        histogram.size = new FCSize(canvasSizeHistogram.cx, canvasSizeHistogram.cy);
        histogram.visible = true;
        histogram.leftVScaleWidth = 70;
        histogram.rightVScaleWidth = 0;
        histogram.vScaleDistance = 60;
        histogram.hScalePixel = 50;
        histogram.hScaleHeight = 70;
        histogram.candlePaddingTop = 30;
        histogram.candlePaddingBottom = 0;
        histogram.volPaddingTop = 20;
        histogram.volPaddingBottom = 0;
        histogram.indPaddingTop = 20;
        histogram.indPaddingBottom = 20;
        histogram.vScaleDistance = 35;
        histogram.candleDivPercent = 1;
        histogram.volDivPercent = 1;
        histogram.indDivPercent = 1;
        histogram.font = "Default,14";
        histogram.data = new Array();
        histogram.cycle = "tick";

        /*
         * 黑色风格
         */
        let toBlack_Chart = function () {
            histogram.paint.defaultUIStyle = "light";
            histogram.backColor = "rgb(0,0,0)";
            histogram.borderColor = "rgb(255,255,255)";
            histogram.textColor = "rgb(255,255,255)";
            histogram.scaleColor = "rgb(255,0,0)";
            histogram.crossTipColor = "rgb(50,50,50)";
            histogram.crossLineColor = "rgb(100,100,100)";
            histogram.gridColor = "rgba(255,0,0,125)";

        };

        /*
        * 白色风格
        */
        let toWhite_Chart = function () {
            histogram.paint.defaultUIStyle = "light";
            histogram.backColor = "rgb(255,255,255)";
            histogram.borderColor = "rgb(0,0,0)";
            histogram.textColor = "rgb(0,0,0)";
            histogram.scaleColor = "rgb(0,0,0)";
            histogram.crossTipColor = "rgb(220,220,220)";
            histogram.crossLineColor = "rgb(100,100,100)";
            histogram.gridColor = "rgba(0,0,0,125)";
        };

        if (histogram.paint.defaultUIStyle == "dark") {
            toBlack_Chart();
        } else if (histogram.paint.defaultUIStyle == "light") {
            toWhite_Chart();
        }

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Histogram = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {

        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Histogram = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                if (!view.data || view.data.length == 0) {
                    return;
                }
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Histogram = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                if (delta > 0) {
                    zoomOutChart(view);
                } else if (delta < 0) {
                    zoomInChart(view);
                }
                invalidateView(histogram);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Histogram = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Histogram = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                touchMoveChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Histogram = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                view.firstTouchIndexCache = -1;
                view.secondTouchIndexCache = -1;
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Histogram = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(histogram);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Histogram = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                view.firstTouchIndexCache = -1;
                view.secondTouchIndexCache = -1;
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintHistogram.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "chart") {
                drawChart(view, paint, clipRect);
            } else {
                let tSize = paint.textSize(view.text, view.font);
                paint.fillRect(view.backColor, 0, 0, view.size.cx, view.size.cy);
                paint.drawText(view.text, view.textColor, view.font, (view.size.cx - tSize.cx) / 2, view.size.cy / 2 + 1 - tSize.cy / 2);
                paint.drawRect(view.borderColor, chart.lineWidthChart, 0, 0, 0, view.size.cx, view.size.cy);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintHistogram.onPaintBorder = function (view, paint, clipRect) {
        };

        /*
        * 重写计算最大最小值
        * chart:K线
        */
        paintHistogram.onCalculateChartMaxMin = function (chart) {
            chart.candleMax = 0;
            chart.candleMin = 0;
            chart.volMax = 0;
            chart.volMin = 0;
            chart.indMin = 0;
            chart.indMin = 0;
            if (chart.data && chart.data.length > 0) {
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    let total = chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3
                        + chart.data[i].data4 + chart.data[i].data5 + chart.data[i].data6;
                    if (i == chart.firstVisibleIndex) {
                        chart.candleMax = total;
                        chart.candleMin = 0;
                    } else {
                        if (chart.candleMax < total) {
                            chart.candleMax = total;
                        }
                    }
                }
            }
        };

        let drawColors = new Array();
        drawColors.push("rgb(59,174,218)");
        drawColors.push("rgb(185,63,150)");
        drawColors.push("rgb(219,68,83)");
        drawColors.push("rgb(246,187,67)");
        drawColors.push("rgb(216,112,173)");
        drawColors.push("rgb(140,192,81)");

        /*
* 重写计算最大最小值
* chart:K线
*/
        paintHistogram.onPaintChartStock = function (chart, paint, clipRect) {
            if (chart.data && chart.data.length > 0) {
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    let x = getChartX(chart, i);
                    let y1 = getChartY(chart, 0, chart.data[i].data1);
                    let zeroY = getChartY(chart, 0, 0);
                    let dWidth = chart.hScalePixel / 3;
                    paint.fillRect(drawColors[0], x - dWidth, y1, x + dWidth, zeroY);
                    let y2 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2);
                    paint.fillRect(drawColors[1], x - dWidth, y2, x + dWidth, y1);
                    let y3 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3);
                    paint.fillRect(drawColors[2], x - dWidth, y3, x + dWidth, y2);
                    let y4 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3 + chart.data[i].data4);
                    paint.fillRect(drawColors[3], x - dWidth, y4, x + dWidth, y3);
                    let y5 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3 + chart.data[i].data4 + chart.data[i].data5);
                    paint.fillRect(drawColors[4], x - dWidth, y5, x + dWidth, y4);
                    let y6 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3 + chart.data[i].data4 + chart.data[i].data5 + chart.data[i].data6);
                    paint.fillRect(drawColors[5], x - dWidth, y6, x + dWidth, y5);
                    if (chart.paint.defaultUIStyle == "dark") {
                        paint.drawRect("rgb(255,255,255)", 1, 0, x - dWidth, y6, x + dWidth, zeroY);
                        if (chart.crossStopIndex == i) {
                            paint.fillRect("rgba(0,0,0,50)", x - dWidth, y6, x + dWidth, zeroY);
                        }
                    } else if (chart.paint.defaultUIStyle == "light") {
                        paint.drawRect("rgb(0,0,0)", 1, 0, x - dWidth, y6, x + dWidth, zeroY);
                        if (chart.crossStopIndex == i) {
                            paint.fillRect("rgba(255,255,255,50)", x - dWidth, y6, x + dWidth, zeroY);
                        }
                    }
                }
            }
        };

        /*
        * 重写绘制线条的函数
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintHistogram.onPaintChartCrossLine = function (chart, paint, clipRect) {
            if (!chart.data || chart.data.length == 0) {
                return;
            }
            let candleDivHeight = getCandleDivHeight(chart);
            let volDivHeight = getVolDivHeight(chart);
            let indDivHeight = getIndDivHeight(chart);
            let crossLineIndex = chart.crossStopIndex;
            if (crossLineIndex == -1) {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let str = "A" + crossLineIndex;
            if (str == "ANaN") {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let drawTitles = new Array();
            drawTitles.push("项目1 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目2 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目3 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目4 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目5 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目6 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));

            let iLeft = chart.leftVScaleWidth + 5;
            for (let i = 0; i < drawTitles.length; i++) {
                let tSize = paint.textSize(drawTitles[i], chart.font);
                paint.drawText(drawTitles[i], drawColors[i], chart.font, iLeft, 5);
                iLeft += tSize.cx + 5;
            }
        };

        addMouseDownEvent(canvasHistogram, paintHistogram, onMouseDown_Histogram);
        addMouseMoveEvent(canvasHistogram, paintHistogram, onMouseMove_Histogram);
        addMouseWheelEvent(canvasHistogram, paintHistogram, onMouseWheel_Histogram);
        addMouseUpEvent(canvasHistogram, paintHistogram, onMouseUp_Histogram, onClick_Histogram);
        addTouchBeginEvent(canvasHistogram, paintHistogram, onTouchBegin_Histogram);
        addTouchMoveEvent(canvasHistogram, paintHistogram, onTouchMove_Histogram);
        addTouchEndEvent(canvasHistogram, paintHistogram, onTouchEnd_Histogram, onClick_Histogram);

        /*
         * 重置大小
         */
        window.onresize = function () {
            invalidate(paintHistogram);
        };

        invalidate(paintHistogram);

        /*
        * 插入模拟数据
        */
        let insertData2 = function () {
            let data = new SecurityData();
            data.close = 0;
            data.date = Date.now();
            data.data1 = Math.random() * 100 - 50;
            data.data2 = Math.random() * 100 - 50;
            data.data3 = Math.random() * 100 - 50;
            data.data4 = Math.random() * 100 - 50;
            data.data5 = Math.random() * 100 - 50;
            data.data6 = Math.random() * 100 - 50;
            if (data.data1 < 0) {
                data.data1 = 0;
            }
            if (data.data2 < 0) {
                data.data2 = 0;
            }
            if (data.data3 < 0) {
                data.data3 = 0;
            }
            if (data.data4 < 0) {
                data.data4 = 0;
            }
            if (data.data5 < 0) {
                data.data5 = 0;
            }
            if (data.data6 < 0) {
                data.data6 = 0;
            }
            histogram.data.push(data);
            resetChartVisibleRecord(histogram);
            checkChartLastVisibleIndex(histogram);
            paintHistogram.onCalculateChartMaxMin(histogram);
            invalidateView(histogram);
        };

        setInterval(insertData2, 200);
    </script>

    <script type="text/javascript">
        let canvasChart2 = document.getElementById("chart2Canvas"); //绘图区域
        let contextChart2 = canvasChart2.getContext("2d"); //绘图上下文
        let paintChart2 = new FCPaint(); //绘图对象
        //缩放高清模式
        if (window.devicePixelRatio) {
            canvasChart2.style.width = canvasChart2.width + 'px';
            canvasChart2.style.height = canvasChart2.height + 'px';
            canvasChart2.height = canvasChart2.height * window.devicePixelRatio;
            canvasChart2.width = canvasChart2.width * window.devicePixelRatio;
            contextChart2.scale(window.devicePixelRatio, window.devicePixelRatio);
            paintChart2.ratio = window.devicePixelRatio;
        }
        //实际绘图大小
        let canvasSizeChart2 = new FCSize(canvasChart2.width / paintChart2.ratio, canvasChart2.height / paintChart2.ratio);
        
        paintChart2.canvas = canvasChart2;
        paintChart2.defaultUIStyle = "light";
        canvasChart2.paint = paintChart2;

        //K线视图
        let chart2 = new FCChart();
        addView(chart2, paintChart2);
        if (chart2.paint.defaultUIStyle == "dark") {
            chart2.backColor = "rgb(0,0,0)";
            chart2.borderColor = "rgb(100,100,100)";
            chart2.textColor = "rgb(255,255,255)";
        } else if (chart2.paint.defaultUIStyle == "light") {
            chart2.backColor = "rgb(255,255,255)";
            chart2.borderColor = "rgb(150,150,150)";
            chart2.textColor = "rgb(0,0,0)";
        }
        chart2.location = new FCPoint(0, 0);
        chart2.size = new FCSize(canvasSizeChart2.cx, canvasSizeChart2.cy);
        chart2.visible = true;
        chart2.leftVScaleWidth = 70;
        chart2.rightVScaleWidth = 0;
        chart2.rightSpace = 80;
        chart2.vScaleDistance = 35;
        chart2.hScalePixel = 11;
        chart2.hScaleHeight = 70;
        chart2.candlePaddingTop = 30;
        chart2.candlePaddingBottom = 20;
        chart2.volPaddingTop = 20;
        chart2.volPaddingBottom = 0;
        chart2.indPaddingTop = 20;
        chart2.indPaddingBottom = 20;
        chart2.vScaleDistance = 35;
        chart2.candleDivPercent = 1;
        chart2.volDivPercent = 1;
        chart2.indDivPercent = 1;
        chart2.font = "Default,12";
        chart2.data = new Array();
        chart2.cycle = "tick";


        /*
        * 黑色风格
        */
        let toBlack_Chart3 = function () {
            chart2.paint.defaultUIStyle = "light";
            chart2.backColor = "rgb(0,0,0)";
            chart2.borderColor = "rgb(255,255,255)";
            chart2.textColor = "rgb(255,255,255)";
            chart2.scaleColor = "rgb(100,100,100)";
            chart2.crossTipColor = "rgb(50,50,50)";
            chart2.crossLineColor = "rgb(100,100,100)";
            chart2.gridColor = "rgba(100,100,100,125)";

        };

        /*
        * 白色风格
        */
        let toWhite_Chart3 = function () {
            chart2.paint.defaultUIStyle = "light";
            chart2.backColor = "rgb(255,255,255)";
            chart2.borderColor = "rgb(0,0,0)";
            chart2.textColor = "rgb(0,0,0)";
            chart2.scaleColor = "rgb(0,0,0)";
            chart2.crossTipColor = "rgb(220,220,220)";
            chart2.crossLineColor = "rgb(100,100,100)";
            chart2.gridColor = "rgba(0,0,0,125)";
        };

        if (chart2.paint.defaultUIStyle == "dark") {
            toBlack_Chart3();
        } else if (chart2.paint.defaultUIStyle == "light") {
            toWhite_Chart3();
        }

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Chart2 = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {

        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Chart2 = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                if (!view.data || view.data.length == 0) {
                    return;
                }
            }
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Chart2 = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                if (delta > 0) {
                    zoomOutChart(view);
                } else if (delta < 0) {
                    zoomInChart(view);
                }
                invalidateView(chart2);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Chart2 = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Chart2 = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                touchMoveChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(view);
            }
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Chart2 = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                view.firstTouchIndexCache = -1;
                view.secondTouchIndexCache = -1;
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Chart2 = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                let firstTouch = false, secondTouch = false;
                let firstPoint = mp, secondPoint = mp;
                if (buttons == 1) {
                    firstTouch = true;
                }
                touchMoveChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
                invalidateView(chart2);
            }
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Chart2 = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                view.firstTouchIndexCache = -1;
                view.secondTouchIndexCache = -1;
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart2.onPaint = function (view, paint, clipRect) {
            if (view.viewType == "chart") {
                drawChart(view, paint, clipRect);
            } else {
                let tSize = paint.textSize(view.text, view.font);
                paint.fillRect(view.backColor, 0, 0, view.size.cx, view.size.cy);
                paint.drawText(view.text, view.textColor, view.font, (view.size.cx - tSize.cx) / 2, view.size.cy / 2 + 1 - tSize.cy / 2);
                paint.drawRect(view.borderColor, chart.lineWidthChart, 0, 0, 0, view.size.cx, view.size.cy);
            }
        };

        /*
        * 绘制线条
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        * divIndex:图层
        * datas:数据
        * color:颜色
        * selected:是否选中
        */
        let drawChartLines2 = function (chart, paint, clipRect, divIndex, datas, color, text) {
            paint.beginPath();
            let lastX = 0, lastY = 0;
            let maxVisibleRecord = getChartMaxVisibleCount(chart, chart.hScalePixel, getChartWorkAreaWidth(chart));
            let showLast = false;
            for (let i = 0; i < datas.length; i++) {
                let x = getChartX(chart, i + chart.firstVisibleIndex);
                let value = datas[i];
                let y = getChartY(chart, divIndex, value);
                if (i > 0) {
                    paint.addLine(lastX, lastY, x, y)
                }
                if (i + chart.firstVisibleIndex == chart.data.length - 1) {
                    showLast = true;
                }
                lastX = x;
                lastY = y;
            }
            paint.drawPath(color, chart.lineWidthChart * 2, 0);
            paint.closePath();
            if (showLast) {
                let r = 10;
                paint.fillEllipse(color, lastX - r, lastY - r, lastX + r, lastY + r);
                if (chart.paint.defaultUIStyle == "dark") {
                    paint.drawEllipse("rgb(255,255,255)", 1, 0, lastX - r, lastY - r, lastX + r, lastY + r);
                } else if (chart.paint.defaultUIStyle == "light") {
                    paint.drawEllipse("rgb(0,0,0)", 1, 0, lastX - r, lastY - r, lastX + r, lastY + r);
                }
                let font = "Default,14";
                let tSize = paint.textSize(text, font);
                if (chart.paint.defaultUIStyle == "dark") {
                    paint.drawText(text, "rgb(255,255,255)", font, lastX - tSize.cx / 2, lastY + tSize.cy + r - tSize.cy / 2);
                } else if (chart.paint.defaultUIStyle == "light") {
                    paint.drawText(text, "rgb(0,0,0)", font, lastX - tSize.cx / 2, lastY + tSize.cy + r - tSize.cy / 2);
                }
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart2.onPaintBorder = function (view, paint, clipRect) {
        };

        /*
        * 重写计算最大最小值
        * chart:K线
        */
        paintChart2.onCalculateChartMaxMin = function (chart) {
            chart.candleMax = 0;
            chart.candleMin = 0;
            chart.volMax = 0;
            chart.volMin = 0;
            chart.indMin = 0;
            chart.indMin = 0;
            if (chart.data && chart.data.length > 0) {
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    if (i == chart.firstVisibleIndex) {
                        chart.candleMax = chart.data[i].data1;
                        chart.candleMin = chart.data[i].data1;
                    } else {
                        if (chart.candleMax < chart.data[i].data1) {
                            chart.candleMax = chart.data[i].data1;
                        }
                        if (chart.candleMin > chart.data[i].data1) {
                            chart.candleMin = chart.data[i].data1;
                        }
                        if (chart.candleMax < chart.data[i].data2) {
                            chart.candleMax = chart.data[i].data2;
                        }
                        if (chart.candleMin > chart.data[i].data2) {
                            chart.candleMin = chart.data[i].data2;
                        }
                        if (chart.candleMax < chart.data[i].data3) {
                            chart.candleMax = chart.data[i].data3;
                        }
                        if (chart.candleMin > chart.data[i].data3) {
                            chart.candleMin = chart.data[i].data3;
                        }
                        if (chart.candleMax < chart.data[i].data4) {
                            chart.candleMax = chart.data[i].data4;
                        }
                        if (chart.candleMin > chart.data[i].data4) {
                            chart.candleMin = chart.data[i].data4;
                        }
                        if (chart.candleMax < chart.data[i].data5) {
                            chart.candleMax = chart.data[i].data5;
                        }
                        if (chart.candleMin > chart.data[i].data5) {
                            chart.candleMin = chart.data[i].data5;
                        }
                        if (chart.candleMax < chart.data[i].data6) {
                            chart.candleMax = chart.data[i].data6;
                        }
                        if (chart.candleMin > chart.data[i].data6) {
                            chart.candleMin = chart.data[i].data6;
                        }
                    }
                }
            }
        };

        let drawColors2 = new Array();
        drawColors2.push("rgb(59,174,218)");
        drawColors2.push("rgb(185,63,150)");
        drawColors2.push("rgb(219,68,83)");
        drawColors2.push("rgb(246,187,67)");
        drawColors2.push("rgb(216,112,173)");
        drawColors2.push("rgb(140,192,81)");

        /*
        * 重写绘制线条的函数
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart2.onPaintChartStock = function (chart, paint, clipRect) {
            if (chart.data && chart.data.length > 0) {
                let datas1 = new Array();
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas1.push(chart.data[i].data1);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas1, drawColors2[0], "项目1");

                let datas2 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas2.push(chart.data[i].data2);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas2, drawColors2[1], "项目2");

                let datas3 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas3.push(chart.data[i].data3);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas3, drawColors2[2], "项目3");

                let datas4 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas4.push(chart.data[i].data4);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas4, drawColors2[3], "项目4");

                let datas5 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas5.push(chart.data[i].data5);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas5, drawColors2[4], "项目5");

                let datas6 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas6.push(chart.data[i].data6);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas6, drawColors2[5], "项目6");
            }
        };

        /*
        * 重写十字线的函数
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart2.onPaintChartCrossLine = function (chart, paint, clipRect) {
            if (!chart.data || chart.data.length == 0) {
                return;
            }
            let candleDivHeight = getCandleDivHeight(chart);
            let volDivHeight = getVolDivHeight(chart);
            let indDivHeight = getIndDivHeight(chart);
            let crossLineIndex = chart.crossStopIndex;
            if (crossLineIndex == -1) {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let str = "A" + crossLineIndex;
            if (str == "ANaN") {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let drawTitles = new Array();
            drawTitles.push("项目1 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目2 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目3 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目4 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目5 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目6 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));

            let iLeft = chart.leftVScaleWidth + 5;
            for (let i = 0; i < drawTitles.length; i++) {
                let tSize = paint.textSize(drawTitles[i], chart.font);
                paint.drawText(drawTitles[i], drawColors2[i], chart.font, iLeft, 5);
                iLeft += tSize.cx + 5;
            }
        };

        addMouseDownEvent(canvasChart2, paintChart2, onMouseDown_Chart2);
        addMouseMoveEvent(canvasChart2, paintChart2, onMouseMove_Chart2);
        addMouseWheelEvent(canvasChart2, paintChart2, onMouseWheel_Chart2);
        addMouseUpEvent(canvasChart2, paintChart2, onMouseUp_Chart2, onClick_Chart2);
        addTouchBeginEvent(canvasChart2, paintChart2, onTouchBegin_Chart2);
        addTouchMoveEvent(canvasChart2, paintChart2, onTouchMove_Chart2);
        addTouchEndEvent(canvasChart2, paintChart2, onTouchEnd_Chart2, onClick_Chart2);

        /*
         * 重置大小
         */
        window.onresize = function () {
            invalidate(paintChart2);
        };

        invalidate(paintChart2);

        /*
        * 插入模拟数据
        */
        let insertData = function () {
            let lastData = null;
            if (chart2.data.length > 1) {
                lastData = chart2.data[chart2.data.length - 1];
            }
            let data = new SecurityData();
            data.close = 0;
            data.date = Date.now();
            data.data1 = Math.random() * 100 - 50;
            data.data2 = Math.random() * 100 - 50;
            data.data3 = Math.random() * 100 - 50;
            data.data4 = Math.random() * 100 - 50;
            data.data5 = Math.random() * 100 - 50;
            data.data6 = Math.random() * 100 - 50;
            if (lastData) {
                data.data1 = data.data1 + lastData.data1;
                data.data2 = data.data2 + lastData.data2;
                data.data3 = data.data3 + lastData.data3;
                data.data4 = data.data4 + lastData.data4;
                data.data5 = data.data5 + lastData.data5;
                data.data6 = data.data6 + lastData.data6;
            }
            chart2.data.push(data);
            resetChartVisibleRecord(chart2);
            checkChartLastVisibleIndex(chart2);
            paintChart2.onCalculateChartMaxMin(chart2);
            invalidateView(chart2);
        };

        setInterval(insertData, 20);
    </script>
</body>
</html>
